更改 svg 圆中的起点

Question

我想使用下面的 SVG，但填充从 3 点钟开始。我希望填充从 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

我猜你是用这张图片来展示某种进步，即它从完全灰色开始，然后随着比例从 0 到 1（或 0%）从 3 点钟开始逐渐填充黄色到 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>

更改 svg 圆中的起点

changing the start point in svg circle

svg

svg-animate