有没有办法让 SVG 笔画 "skip" 相互交叉，就像 CSS 有 `text-decoration-skip-ink` 一样？

Question

我可能可以在笔划周围使用实心投影滤镜手动伪造它，设置为背景颜色，但这既不灵活也不理想。

视觉上，而不是这个：

我想要这个（如果圆圈在上面）：

Answer 1

一个可行的解决方案是创建一个带有白色矩形和黑色描边 <use> 元素的遮罩，该元素使用圆形。

请注意，白色矩形覆盖了所有 svg 元素，并且 <use> 元素的 stroke-width 比圆的笔划宽。

这样您就可以在矩形中创建一个孔，让您可以看到背景中的任何内容。

<svg fill="none" stroke="black" stroke-width="3">
  <mask id="m">
    <rect width="100%" height="100%" fill="white" />
    <use xlink:href="#c" stroke-width="10" />
  </mask>

  <rect x="10" y="5" width="70" height="70" mask="url(#m)" />

  <circle id="c" cx="80" cy="75" r="40" />

</svg>

有没有办法让 SVG 笔画 "skip" 相互交叉，就像 CSS 有 `text-decoration-skip-ink` 一样？

Is there a way for SVG strokes to "skip" intersecting each other, the same sort of way that CSS has `text-decoration-skip-ink`?

svg

stroke