Gostaria de criar um círculo com traço de 12 e raio de 20 e aplicar uma máscara a ele. O problema é que o círculo é cortado na parte superior, inferior, esquerda e direita, como se houvesse uma máscara quadrada aplicada a ele ou o traço estivesse transbordando de alguma forma. Às vezes vemos problemas como este, quando, por exemplo, o traço é muito largo comparado ao raio (sem máscara). Mas, neste caso, 20/12 não parece irracional. Também tentei aumentar os números, mas o problema ainda persiste.
Isso pode ser um bug, mas parece mais ou menos consistente em todos os navegadores (testei Firefox, Chromium e Opera no Ubuntu e Firefox e Google Chrome no Android).
No exemplo, o primeiro círculo tem o problema e o segundo e o terceiro parecem OK, com respectivamente um raio maior ou uma largura de traço menor. Eu aplico uma máscara a cada um que não deve mascarar nada (é claro que meu caso de uso é muito mais complicado, mas esta é a representação mais simples possível).
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>