6 replies

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>

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

SVG Circle

Similar Threads

Similar Threads

Similar Threads