SVG Circle

I made a circle in svg. It is supposed to be a speedometer for a Game UI, i'm also using Vue as a Framework. Dasharray 766 is the full circle, 577 is 3/4 of it. Normally when i have a circle like this and i set the Dashoffset to the exact number as the Dasharray the stroke is empty, but with this circle, the rest that wasn't filled out before now gets filled out. Idk if i'm doing something wrong.
<svg id="speedo" viewBox="0 0 300 300">
<circle
class="speedo-progress"
cx="150"
cy="150"
r="122"
fill="none"
stroke="#952AE8"
stroke-width="17"
stroke-dasharray="577"
stroke-dashoffset="577"
transform="rotate(135)"
transform-origin="150 150"
/>
</svg>
<svg id="speedo" viewBox="0 0 300 300">
<circle
class="speedo-progress"
cx="150"
cy="150"
r="122"
fill="none"
stroke="#952AE8"
stroke-width="17"
stroke-dasharray="577"
stroke-dashoffset="577"
transform="rotate(135)"
transform-origin="150 150"
/>
</svg>
4 Replies
dys 🐙
dys 🐙17mo ago
Setting the pathLength will likely make your calculations easier: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/pathLength.
pathLength - SVG: Scalable Vector Graphics | MDN
The pathLength attribute lets authors specify a total length for the path, in user units. This value is then used to calibrate the browser's distance calculations with those of the author, by scaling all distance computations using the ratio pathLength / (computed value of path length).
ardelan
ardelan17mo ago
it's not about the calculation. the circle bugs out, where it fills the rest that wasn't filled before, and should'nt be filled i could send a picture after my round
b1mind
b1mind17mo ago
Make a codepen
ardelan
ardelan17mo ago
👍 found the error, sry. but still thx
Want results from more Discord servers?
Add your server