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

  

当适用元素的几何没有宽度或没有高度（例如水平线或垂直线）时，即使使用非零值查看时该线具有实际粗细，也不应使用关键字objectBoundingBox笔划宽度，因为在边框计算中将忽略笔划宽度。当适用元素的几何没有宽度或高度并且指定了objectBoundingBox时，将忽略给定的效果（例如，渐变或滤镜）。

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