SVG pathLength on circle not defining circle's circumference?-CodePudding

According to

Firefox:

Safari:

Edit 2:

When I get their total lengths, it's different across browsers! Is this intended? Is it possible to solve this issue?

CodePudding user response：

As @enxaneta commented. The smaller the viewBox, the bigger the problem is. In this example it is only the last one (viewBox="0 0 100 100") that looks OK in Chrome.

<svg xmlns="http//www.w3.org/2000/svg" width="130" viewBox="0 0 1 1">
  <path d="M0 .5 L1 .5" stroke-width=".01" stroke="gray"/>
  <circle cx=".5" cy=".5" r=".4" stroke="black" stroke-width=".2" fill="none" stroke-dasharray="180 360" pathLength="360" />
</svg>

<svg xmlns="http//www.w3.org/2000/svg" width="130" viewBox="0 0 10 10">
  <path d="M0 5 L10 5" stroke-width=".1" stroke="gray"/>
  <circle cx="5" cy="5" r="4" stroke="black" stroke-width="2" fill="none" stroke-dasharray="180 360" pathLength="360" />
</svg>

<svg xmlns="http//www.w3.org/2000/svg" width="130" viewBox="0 0 50 50">
  <path d="M0 25 L50 25" stroke-width=".5" stroke="gray"/>
  <circle cx="25" cy="25" r="20" stroke="black" stroke-width="10" fill="none" stroke-dasharray="180 360" pathLength="360" />
</svg>

<svg xmlns="http//www.w3.org/2000/svg" width="130" viewBox="0 0 100 100">
  <path d="M0 50 L100 50" stroke-width="1" stroke="gray"/>
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="20" fill="none" stroke-dasharray="180 360" pathLength="360" />
</svg>