SVG mask rendering incorrectly

Question

Here is a simple SVG mask (fiddle):

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="-100 -400 600 600">

  <!-- Here I define the mask, a white rectangle with a strip removed -->
  <defs>
    <mask id="mymask">
      <rect x="100" y="-200" width="200" height="100" fill="white"/>
      <path d="M 250 -150  L 150 -150" stroke="black" fill="none" stroke-opacity="1" fill-opacity="1" stroke-width="25"/>
    </mask>
  </defs>

  <!-- This masked blue rectangle is displayed correctly, and lets us see where the mask is -->
  <rect x="-100" y="-300" width="500" height="500" fill="blue" fill-opacity="0.2" mask="url(#mymask)"/>

  <!-- This green vertical line is not masked, and is drawn on top of the blue rectangle -->
  <path d="M 220 -110 L 220 -190" stroke="green" stroke-opacity="0.5" stroke-width="10" fill="none"/>

  <!-- INCORRECT - This masked red line should be drawn to the left of the green line, but it does not appear -->
  <path d="M 180 -110 L 180 -190" stroke="red" stroke-width="10" mask="url(#mymask)"/>

</svg>

This produces the following output:

It seems to me that this is being rendered incorrectly: the red line is missing. The red line should appear to the left of the green line, but with the central part removed, according to the mask shape. However, the red line is not being drawn at all.

I have spent a lot of time studying the documentation for SVG masks but I cannot see the issue here. If anybody can see what is wrong I would very much appreciate the insight. The issue cannot be with the coordinate system for the mask (often a confusing area) because the masked blue rectangle is being rendered correctly.

Robert Longson Robert Longson · Accepted Answer · 2018-11-26T07:50:13

The default for masks is to use objectBoundingBox units, in which case you have to be careful of this

Keyword objectBoundingBox should not be used when the geometry of the applicable element has no width or no height, such as the case of a horizontal or vertical line, even when the line has actual thickness when viewed due to having a non-zero stroke width since stroke width is ignored for bounding box calculations. When the geometry of the applicable element has no width or height and objectBoundingBox is specified, then the given effect (e.g., a gradient or a filter) will be ignored.

The shapes that are missing have no height or width as they are only visible by dint of stroking.

SVG mask rendering incorrectly

1 Answers