Search code examples
svgstroke

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

I could probably manually fake it using a solid-edged drop shadow filter around the strokes, set to the background color, but that's neither resilient nor ideal.

Visually, instead of this:

enter image description here

I want to have this (if the circle is on top):

enter image description here

Solution

  • A posible solution would be creating a mask with a white rectangle and a black stroked <use> element that is using the circle.

    Please note that the white rectangle is covering all the svg element and the stroke-width of the <use> element is wider than the stroke of the circle.

    This way you create a hole in the rect that is letting you to see whatever you have in the background.

    <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>