How to fix line issue when clipping in SVG?

Question

enter image description here As you can see in the image clipping doesn't connect the lines perfectly due to the overlap from the top oval.

<svg width="400" height="200" xmlns="http://www.w3.org/2000/svg">
 <!-- Define the mask to hide the overlapping stroke -->
 <defs>
 <mask id="maskFaceStroke">
 <!-- White background to show everything by default -->
 <rect width="100%" height="100%" fill="white" />
 <!-- Black shape to hide the overlapping stroke -->
 <ellipse cx="150" cy="100" rx="70" ry="90" fill="black" />
 </mask>
 </defs>
 <!-- Draw the head -->
 <ellipse cx="150" cy="100" rx="70" ry="90" fill="#cce5ff" stroke="blue" stroke-width="4" />
 <!-- Draw the face fill over the head -->
 <ellipse cx="190" cy="110" rx="40" ry="60" fill="#ffe5e5" />
 <!-- Draw the face stroke over the head, but mask the part that overlaps with the head -->
 <ellipse cx="190" cy="110" rx="40" ry="60" fill="none" stroke="red" stroke-width="4" mask="url(#maskFaceStroke)" />
</svg>

I think this is a common issue has anyone found a way around it?

I'm open to using js etc if it will fix it or making duplicate layers for just the lines etc. Thank you.

• chrwahl: So you would like the blue and red line/stroke to be continuous?
• chrwahl: And the stroke is not going to be the same color all the way in the end?

Answer 1

That's actually the expected behavior.
To get the desired result you need to add a stroke (4 units in your case) to your mask ellipse to shrink the masked area by a half stroke width:

<svg viewBox="0 0 400 200" xmlns="http://www.w3.org/2000/svg">
 <!-- Define the mask to hide the overlapping stroke -->
 <defs>
 <mask id="maskFaceStroke">
 <!-- White background to show everything by default -->
 <rect width="100%" height="100%" fill="white" />
 <!-- Black shape to hide the overlapping stroke -->
 <ellipse cx="150" cy="100" rx="70" ry="90" fill="black" />
 </mask>
 </defs>
 <!-- Draw the head -->
 <ellipse cx="150" cy="100" rx="70" ry="90" fill="#cce5ff" stroke="blue" stroke-width="4" />
 <!-- Draw the face fill over the head -->
 <ellipse cx="190" cy="110" rx="40" ry="60" fill="#ffe5e5" />
 <!-- Draw the face stroke over the head, but mask the part that overlaps with the head -->
 <ellipse cx="190" cy="110" rx="40" ry="60" fill="none" stroke="red" stroke-width="4" mask="url(#maskFaceStroke)" />
 
 <!-- illustrate mask -->
 <ellipse cx="150" cy="100" rx="70" ry="90" fill="green" fill-opacity="0.75" />
</svg>
<svg viewBox="0 0 400 200" xmlns="http://www.w3.org/2000/svg">
 <!-- Define the mask to hide the overlapping stroke -->
 <defs>
 <mask id="maskFaceStroke2">
 <!-- White background to show everything by default -->
 <rect width="100%" height="100%" fill="white" />
 <!-- Black shape to hide the overlapping stroke -->
 <ellipse cx="150" cy="100" rx="70" ry="90" fill="black" stroke="white" stroke-width="4" />
 </mask>
 </defs>
 <!-- Draw the head -->
 <ellipse cx="150" cy="100" rx="70" ry="90" fill="#cce5ff" stroke="blue" stroke-width="4" />
 <!-- Draw the face fill over the head -->
 <ellipse cx="190" cy="110" rx="40" ry="60" fill="#ffe5e5" />
 <!-- Draw the face stroke over the head, but mask the part that overlaps with the head -->
 <ellipse cx="190" cy="110" rx="40" ry="60" fill="none" stroke="red" stroke-width="4" mask="url(#maskFaceStroke2)" />
 
</svg>