更改svg圈中的起点

Question

我想使用下面的SVG，但填充从3 O时钟开始。 我希望填充从12点开始。 请提出如何实现这一目标的建议。

    <svg id="svg" width="200" height="200" viewPort="0 0 100 100" version="1.1"
xmlns="http://www.w3.org/2000/svg">
  <circle r="90" cx="100" cy="100" fill="transparent" stroke-dasharray="565.48"
  stroke-dashoffset="0"></circle>
   <text id="percentile" x="50%" y="50%" text-anchor="middle" stroke="#191919"
   stroke-width="1px" font-size="35" dy="0.3em">{{pct}}</text>
   <!--<text id="percentile" x="50%" y="50%" text-anchor="middle" stroke="#191919"
   stroke-width="1px" font-size="20" dy="-0.3em">Percentile</text>-->
  <circle id="bar" r="90" cx="100" cy="100" fill="transparent"
  stroke-dasharray="565.48" stroke-dashoffset="0"></circle>
</svg>

Answer 1

我认为你正在使用图像显示某种进展，即它从完全灰色开始，然后从3点开始逐渐填满黄色，因为比例从0到1（或0％到100） ％），图像显示50％的样子。你想把开始从3点移到12点。

更新：我在此处发布的原始解决方案建议您使用stroke-dashoffset解决此问题。但是，该解决方案不正确：它仅适用于圆的小百分比，并且一旦您尝试填充较大比例的圆，就会分解。下面的更新解决方案显示了原始问题下面的评论中的建议的实现。它涉及旋转圆圈。下面的演示代码还解决了您在评论中对此解决方案表达的一个问题，即演示代码显示如果旋转仅应用于圆圈，则不应影响放置在圆圈内的文本。

<svg id="svg" width="500" height="200">
  <g transform="">
    <circle r="90" cx="100" cy="100" fill="none" stroke="gray" stroke-width="20"></circle>
    <circle id="bar" r="90" cx="100" cy="100" fill="none" stroke="orange" stroke-width="20" stroke-dasharray="70.69 494.80" transform="rotate(0, 100, 100)"></circle>
    <text x="35" y="100" font-family="Verdana" font-size="15">Text inside circle</text>
  </g>
  <g transform="translate(250)">
    <circle r="90" cx="100" cy="100" fill="none" stroke="gray" stroke-width="20"></circle>
    <circle id="bar" r="90" cx="100" cy="100" fill="none" stroke="orange" stroke-width="20" stroke-dasharray="70.69 494.80" transform="rotate(-90, 100, 100)"></circle>
    <text x="35" y="100" font-family="Verdana" font-size="15">Text inside circle</text>
  </g>
</svg>