Kevin Powell - Community•2y ago

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 🐙•2y 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).

ardelanOP•2y 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•2y ago

Make a codepen

ardelanOP•2y ago

👍 found the error, sry. but still thx

Gaming

Programming

SVG Circle