SVGを使用した円の進行状況バーの正しい向き

Question

次のコードで、Sassで円形の進行状況バーを作成しています。進行状況バーは3時に開始します。私はそれが代わりに12時に始まるようにしたいと思います。

$radius: 50 
$circumference: (3.14159265359 * (2 * $radius)) 

$percent: 85 
$stroke_percentage: $circumference - (($percent/100) * $circumference) 

@keyframes circleIconProgress 
    to 
    stroke-dashoffset: $stroke_percentage 

svg 
    stroke-dasharray: $circumference 
    stroke-dashoffset: $circumference 

どうすればよいですか？ありがとう。

Answer 1

サークルを反時計回りに90度回転させる必要があります。例：

<circle ... transform="rotate(-90, 75,75)"/> 

ここで（75,75）はサークルの中心の座標です。