score:2

Accepted answer

From my reading of the SVG spec, it's not possible to use only a <path>'s stroke as the clipping path:

The raw geometry of each child element exclusive of rendering properties such as ‘fill’, ‘stroke’, ‘stroke-width’ within a ‘clipPath’ conceptually defines a 1-bit mask (with the possible exception of anti-aliasing along the edge of the geometry) which represents the silhouette of the graphics associated with that element. Anything outside the outline of the object is masked out.

However, converting the <clipPath> to a <mask> element produces what I think is your desired effect. Here's a forked CodePen to demonstrate — the paths have have their strokes set to white, and the <text> elements were also given a fill of white to match the clip-path effect.


Related Query

More Query from same tag