Странное поведение свойства dasharray в круге SVG

Question

Я пытаюсь создать бесконечный цикл анимации круга SVG.

Я хочу создать 12 равных частей и разделить их на некоторый промежуток.

Чтобы вычислить значение круга штук я использовал к коэффициент из таблицы ниже Так что я сделал 0,25782 * 160 (диаметр моего круга), и я получил: 41.2512 (это должно быть значение моих частей) ,

После этого я создал StrokeDashArray пропеллер с помощью этого значения: 40 1,2512 Я подумал, что это должно быть правильное значение.

Похоже, что это было, но когда я сменил strokedashOffset prop Я увидел несколько артефактов с правой стороны. Я не знаю, почему это произошло и как я могу это исправить (и где я сделал ошибку)?

Спасибо за любую помощь.

Демо здесь (просто измените strokedashOffset на значение 408, и вы увидите эту проблему).

https://jsfiddle.net/q8enje9o/

Вот мой чистый код SVG

<svg version="1.1" id="svgout_dasharray" baseProfile="full" width="500" 

height="500" viewBox="0, 0, 500, 500" xmlns="http://www.w3.org/2000/svg" style="border: 1px solid black"> 

<defs></defs> 

<circle cx="150" cy="150" r="80" fill="none" stroke="#ff0000" style="stroke-width: 30;stroke-dasharray: 40, 1.2512;stroke-dashoffset: 380;"></circle> 
</svg> 

Таблица к коэф. п - количество круглых кусочков

Вот формула, как вы можете рассчитать этот коэф. сам по себе

п - Количество деталей

360 - 2 * PI (целая окружность)

к - наш коэффициент. что мы хотим найти

P.S. Вот демо с проблемой после обновления (Chrome последней & для Windows 10)

Answer 1

Ваш вопрос немного запутан, потому что вы много говорите о том, как вы вычисляете массив тире, но жалуетесь на вещи, выглядящие забавно, когда вы меняете смещение тире.

Окружность круга 2 * PI * радиус.Если вы хотите п разделов в окружности, то «тир + пробел» в вашем тире массиве нужно подвести к:

(2 * PI * radius)/n 

так для 12 секторов, и радиус 80, то значение будет

(2 * PI * 80)/12 = 41.8879 

Как сказал Роберт, «stroke-dashoffset =« 40 1.8879 »должен работать. И действительно, так оно и есть.

<svg width="500" height="500" style="border: 1px solid black"> 
 
    <circle cx="150" cy="150" r="80" fill="none" stroke="#ff0000" 
 
      style="stroke-width: 30;stroke-dasharray: 40 1.8879;"/> 
 
</svg>

Теперь вы также говорите о тире смещения. Я не знаю, почему вы хотите изменить смещение тире. Наверное, вы пытаетесь заставить тире вращаться вокруг окружности чего-то. Это правильно?

Если это так, то это должно работать - до тех пор, пока вы точны с вашими значениями массива тире. Смотри ниже.

<svg width="500" height="500" style="border: 1px solid black"> 
 
    <circle cx="150" cy="150" r="80" fill="none" stroke="#ff0000" 
 
      style="stroke-width: 30;stroke-dasharray: 40 1.8879; stroke-dashoffset: 408;"/> 
 
</svg>

Answer 2

Окружность окружности/суммы значений штриха-dasharray должна быть целым числом, если вы хотите, равномерно расположенные линии, и это ISN» т в вашем случае.

Таким образом, вы, вероятно, хотите что-то вроде инсульта-дашаррая: 40, 1.8879; который должен работать с любым значением удара-dashoffset.