使用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）是圆心的坐标。