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 单位，在这种情况下你必须小心这一点

当适用元素的几何形状没有宽度或高度时（例如水平线或垂直线的情况），即使由于具有非零笔划宽度而在查看时具有实际厚度，也不应使用关键字 objectBoundingBox边界框计算忽略笔画宽度。当适用元素的几何形状没有宽度或高度并且指定了 objectBoundingBox 时，将忽略给定的效果（例如渐变或滤镜）。

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