SVG Mask 使线条消失

Question

在我下面的示例中，蒙版在绿线和蓝线上正常工作，但使水平红线完全消失。摘下面具后，红线似乎没有任何问题。这是怎么回事？

document.querySelector('button').addEventListener('click', function(){
    document.getElementById('problem-line').removeAttribute('mask')
}, false)

<svg width="400" height="180">
  <defs>
    <g id='circle'>
      <circle r="50" cx="100" cy="100" />
    </g>
    <mask id="hole">
      <rect width="100%" height="100%" fill="white" />
      <use xlink:href="#circle" />
    </mask>
  </defs>
  <use xlink:href="#circle" opacity='0.5' />
  <line id='problem-line' x1='100' y1='100' x2='300' y2='100' stroke='red' mask="url(#hole)" />
  <line x1='100' y1='100' x2='300' y2='50' stroke='green' mask="url(#hole)" />
  <line x1='100' y1='100' x2='300' y2='150' stroke='blue' mask="url(#hole)" />

</svg>
<div>
  <button>Remove mask</button>
</div>

Answer 1

maskUnits的默认值是 objectBoundingBox。您遇到的关键问题在规范文本的最后一段中有所描述。

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

如果您有一条水平线，为什么不使用带有填充的矩形而不是带有笔划的线？或者使用 userSpaceOnUse 单位。