SVGダッシュオフセット開始角度

Question

私はSVGで単純な円形のプログレスバーを作成しましたが、現在のように右向きではなく円の上から（時計回りに）プログレスバーを作成する際にいくつか問題があります。

ここでは、コードです： ​​

あなたは、私がこの事を修正することができます方法についていくつかのガイダンスを提供することができれば、私は本当に感謝しますが。ありがとうございました。

//編集：

{ transform: rotateZ(-90deg); transform-origin: center center; }

しかし、まだJS経由でこれを行う方法を探して： 私はこのように、CSSを経由してこれを行うことができました。

Answer 1

使用している<circle>のようなすべてのパス以外の図形には、「同等のパス」が定義されています。これは、ダッシュパターンがすべてのSVGレンダラで一貫して動作するように指定されています。 <circle>の場合、等価パスは3時の位置から始まり、円の周りを時計回りに進むように定義されています。

参照：https://www.w3.org/TR/SVG/shapes.html#CircleElement

回転あるいはそれを変換するよりも、他を変更する方法はありません。これまでのようにCSSで行うことができます（現在のところ、すべてのブラウザで動作しません）、またはのtransform属性で行うことができます。