Search code examples
svgsvg-animate

changing the start point in svg circle

I want to use the below SVG but the the fill starts from 3 O clock. I want the fill to start from 12 O clock. Please give suggestions on how to achieve that.

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

SVG circle

Solution

  • I presume you are using the image to show some kind of progress, i.e. it starts at completely gray, then gradually fills up with yellow starting from 3 o'clock as the proportion goes from 0 to 1 (or 0% to 100%), and the image shows what it looks like at 50%. You want to shift the start from 3 o'clock to 12 o'clock.

    Update: The original solution I posted here suggested that you could solve this problem by using stroke-dashoffset. However, that solution was incorrect: it only works for small percentages of the circle, and breaks down once you try to fill larger proportions of the circle. The updated solution below shows an implementation of the suggestion in the comments below the original question. It involves rotating the circle. The demo code below also addresses one of the concerns you expressed for this solution in your comments, i.e. the demo code shows that if the rotation is applied only to the circle, it should not affect text that is placed within the circle.

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