Início / coding / Perguntas / 77425670
Accepted
chrwahl
Asked: 2023-11-05 19:08:56 +0800 CST

Parte do círculo é cortada quando uma máscara é aplicada

  • 772

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>

svg

1 respostas

  1. Best Answer

    Ajuste o tamanho da máscara para a largura do traço.

    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>

    • 3

relate perguntas