Part of the circle get cut off when a mask is applied

I would like to create a circle that has a stroke of 12 and a radius of 20 and apply a mask to it. The issue is that the circle gets cut off top, bottom, left, and right as if there was a square mask applied to it, or the stroke was somehow overflowing. We sometimes see issues like this, when for instance the stroke is too wide compared to the radius (with no mask). But in this case 12/20 doesn't seam unreasonable. I also tried to scale up the numbers, but the issue is still there.

This could be a bug, but it looks more or less consistent across browsers (I tested Firefox, Chromium and Opera on Ubuntu and Firefox and Google Chrome on Android).

In the example the first circle has the issue and the second and third looks OK, with respectively a larger radius or a smaller stroke width. I apply a mask to each that should mask off nothing (off course my use case is mush more complicated, but this is the simplest representation possible).

svg {
  border: solid 1px black;
}

<svg viewBox="0 0 180 80" xmlns="http://www.w3.org/2000/svg" stroke="black" fill="none">
  <defs>
    <mask id="mask01">
      <rect width="180" height="80" fill="white"/>
    </mask>
  </defs>
  <circle mask="url(#mask01)" cx="30" cy="40" r="20" stroke-width="12" />
  <circle mask="url(#mask01)" cx="90" cy="40" r="26" stroke-width="12" />
  <circle mask="url(#mask01)" cx="150" cy="40" r="20" stroke-width="8" />
</svg>

Solution

Adjust the mask size for the stroke-width.

svg {
  border: solid 1px black;
}

<svg viewBox="0 0 180 80" xmlns="http://www.w3.org/2000/svg" stroke="black" fill="none">
  <defs>
    <mask id="mask01" x="-30%" y="-30%" width="160%" height="160%">
      <rect width="180" height="80" fill="white"/>
    </mask>
  </defs>
  <circle mask="url(#mask01)" cx="30" cy="40" r="20" stroke-width="12" />
  <circle mask="url(#mask01)" cx="90" cy="40" r="26" stroke-width="12" />
  <circle mask="url(#mask01)" cx="150" cy="40" r="20" stroke-width="8" />
</svg>