SVG pathLength on circle not defining circle's circumference?

Question

According to https://developer.mozilla.org/en-US/docs/Web/SVG/Element/circle, the pathLength attribute is supposed to define the "total length for the circle's circumference", however, when I use stroke-dasharray, it doesn't seem to line up?

<svg width="100" height="100" viewBox="0 0 1 1">
  <circle
    cx="0.5"
    cy="0.5"
    stroke-width="0.5"
    r="0.25"
    pathLength="360"
    stroke-dasharray="180 360"
    stroke-dashoffset="0"
    stroke="black"
    fill="none"
  />
</svg>

According to https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/pathLength as well, this should be half-filled, thus a semi-circle, however it's slightly less than a semi-circle. If I have stroke-dasharray set to 360 360 instead, it doesn't fully close when, if I understand how the pathLength attribute is supposed to work, it should.

Am I misunderstanding pathLength or stroke-dasharray?

Edit: it seems to work differently across browsers...?

Chromium:

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?

Answer 1

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>