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.
4 Replies
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).
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
Make a codepen
👍
found the error, sry. but still thx