How to set the radius linear gradient % with full accuracy

Question

I'm testing this code:

 <svg height="150" width="150">
      <defs>
        <radialGradient id="grad1" cx="80%" cy="20%" r="100%" fx="100%" fy="50%">
          <stop offset="0%" style="stop-color:rgb(0,0,255);stop-opacity:1" />
          <stop offset="100%" style="stop-color:rgb(0,200,255);stop-opacity:1" />
        </radialGradient>
      </defs>
      <ellipse cx="100" cy="100" rx="30" ry="30" stroke="url(#grad1)" stroke-width="3" fill="none" stroke-linecap="round" stroke-dasharray="200" stroke-dashoffset="20" transform-origin="100 100" transform="rotate(-95)"/>
    </svg>

I've tested with stroke-dasharray="200" and stroke-dashoffset="20" that is the most accuracy values I found. Base on this I must find the values to set the % of the circle. With troke-dasharray="200" stroke-dashoffset="20" the circle is functionality on 10% jumps but when I want to set values between 91%-99% the circle seems like be full completed. Looks like with values near to 0% the circle looks like empty.

I need to set with full accuracy the % of the circle with no rotation of that. (The circle must begin on the top of it)

Sorry if my english is not perfect. Thanks.

In this case you may want to use: `` In order to calculate the length of the path you can use the `getTotalLength()` method. You are using this length as the `stroke-dasharray` value. — enxaneta, Nov 19 '19 at 09:36
Can you show me an example please? And why you se the value of 188.19? — Ignacio Castillejo Gomez, Nov 20 '19 at 00:15
It is not clear to me what exactly you are trying to do. What effect are you trying to achieve. Perhaps add a mockup image to your question that shows what you want to happen. — Paul LeBeau, Nov 20 '19 at 10:57

Paul LeBeau · Accepted Answer · 2019-11-21T14:29:10.150

To get your progress bar to work correctly, the values you use for the dash pattern and dash offset have to be calculated to match your circle size.

Your circle has radius 30, so the circumference is 30 * 2 * PI = 188.5.

That is are the value you need to use in your dash pattern.

stroke-dasharray="188.5 188.5"

To show a percentage, you could adjust your dash pattern accordingly. For example, 90% could be achieved using:

stroke-dasharray="169.65 188.5"

<svg height="150" width="150">
  <defs>
    <radialGradient id="grad1" cx="80%" cy="20%" r="100%" fx="100%" fy="50%">
      <stop offset="0%" style="stop-color:rgb(0,0,255);stop-opacity:1" />
      <stop offset="100%" style="stop-color:rgb(0,200,255);stop-opacity:1" />
    </radialGradient>
  </defs>

  <circle cx="100" cy="100" r="30"
          stroke="url(#grad1)" stroke-width="3" fill="none" stroke-linecap="round"
          stroke-dasharray="169.65 188.5"
          transform="rotate(-95, 100, 100)"/>
</svg>

The other way to do the progress bar thing is by using a dash offset. Particularly if you want to animate the progress bar.

The way to do 90% this way would be by setting the dash offset to (1 - percentage_fraction) * circumference. So 90% would correspond to (1 - 0.9) * 188.5 = 18.85

stroke-dasharray="188.5 188.5"
stroke-dashoffset="18.9"

<svg height="150" width="150">
  <defs>
    <radialGradient id="grad1" cx="80%" cy="20%" r="100%" fx="100%" fy="50%">
      <stop offset="0%" style="stop-color:rgb(0,0,255);stop-opacity:1" />
      <stop offset="100%" style="stop-color:rgb(0,200,255);stop-opacity:1" />
    </radialGradient>
  </defs>

  <circle cx="100" cy="100" r="30"
          stroke="url(#grad1)" stroke-width="3" fill="none" stroke-linecap="round"
          stroke-dasharray="188.5 188.5" stroke-dashoffset="18.9"
          transform="rotate(-95, 100, 100)"/>
</svg>

How to set the radius linear gradient % with full accuracy

1 Answers1