SVG 蒙版渲染不正确

Question

这是一个简单的 SVG 蒙版 (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>

这会产生以下输出：

在我看来，这是错误地呈现：红线不见了。根据蒙版形状，红线应出现在绿线的左侧，但中央部分已移除。但是，根本没有画红线。

我花了很多时间研究 SVG 遮罩的文档，但我看不到这里的问题。如果有人能看出问题所在，我将非常感谢您的见解。问题不可能出在遮罩的坐标系（通常是一个令人困惑的区域），因为遮罩的蓝色矩形正在正确渲染。

Answer 1

遮罩的默认设置是使用 objectBoundingBox 单位，在这种情况下您必须 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.

缺少的形状没有高度或宽度，因为它们只能通过抚摸才能看到。

SVG 蒙版渲染不正确

SVG mask rendering incorrectly

svg

mask