SVGサークルのdasharrayプロパティの奇妙な動作

Question

SVGサークルの無限アニメーションループを作成しようとしています。

私は12個の等しい部分を作り、ある程度のギャップで分けたいと思っています。 41.2512（それはです私の作品の値でなければなりません）：私は、だから私は（私の円の直径）0,25782 * 160を行なったし、私が得た 下表からK係数を使用し、円片の値を計算するに

。私はその値を経由してstrokeDasharray小道具を作成した後

：40 1.2512私はそれが正しい値であることを考えました。

私が変更したときのように見えるstrokedashOffset小道具私は右側にあるアーティファクトを見た。私はなぜそれが起こったのか、それをどのように修正できるのか（そして私が間違いを犯した場所）を知らないのですか？

ありがとうございました。

ここでデモしてください（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> 

K COEFの表。 N - サークル作品

のカウントは、ここでは、それらのCOEFを計算することができる方法の式です。単独で

N - 片

360のカウント - 2 * PI（全円）

K - 私達のCOEF。我々は

P.S.を見つけたいことここでは「更新後の問題とデモ（最新クローム&のWindows 10）

Answer 1

ダッシュ配列の計算方法について多くのことを話していますが、ダッシュオフセットを変更したときに面白く見えるものについては不平を言うので、少し混乱します。

円の円周は2 * PI *半径です。あなたの周囲にn個セクションをしたい場合は、あなたのダッシュ配列の「ダッシュ+ギャップが」に合計する必要があります：12個の部門、および80の半径のためにそう

(2 * PI * radius)/n 

、その値は次のようになります

(2 * PI * 80)/12 = 41.8879 

Robertが述べたように、 `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あなたの場合はt。

ストロークダッシュアレイのようなものがおそらく必要です：40,1.879;どのストロークダッシュオフセット値でも動作するはずです。