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