更改 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% 到 100）从 3 点开始逐渐填充黄色%)，图像显示了它在 50% 时的样子。您想将开始时间从 3 点改为 12 点。

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

<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>