How to cut out a dashed line in SVG?

1
votes

Here is an example:

<svg width="200" height="200">
  <rect x="50" y="50" width="100" height="100"/>
  <line x1="0" y1="0" x2="200" y2="200" stroke="red" stroke-width="5" stroke-dasharray="5"/>
</svg>

https://codepen.io/anon/pen/oyqYKZ

I want the red line to be cut out from the rect, so that where there are red dashes on the rect there should be holes in the rect.

I tried to use a clipPath: https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Clipping_and_masking. But that seems to only cut out the "fill" rather than the stroke.

1
svg

1 Answers

2
votes

What you need is a mask.

For masks, color is important. Imagine the content of the mask element being converted to greyscale. White then will give the masked content full opacity, black zero opacity, and the greys inbetween partial opacity. Empty areas are considered black = transparent. The mask must therefore contain a white background and the dashed line in black in the foreground.

<svg width="200" height="200">
  <mask id="dash">
    <rect width="100%" height="100%" fill="white"/>
    <line x1="0" y1="0" x2="200" y2="200" stroke="black" stroke-width="5" stroke-dasharray="5"/>
  </mask>
  <rect x="50" y="50" width="100" height="100" mask="url(#dash)"/>
</svg>