SVG蒙版使线条消失

Question

SVG蒙版使线条消失

7

在我的下面的示例中，遮罩在绿色和蓝色线上起作用，但会让水平的红线完全消失。当移除遮罩时，红线似乎没有问题。出了什么问题？

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>

- bongbang

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Robert Longson · Accepted Answer

默认的 maskUnits 是 objectBoundingBox。你需要注意的关键问题在规范文本的最后一段中有描述。

如果适用元素的几何形状没有宽度或高度，例如水平或垂直线的情况，即使该线具有非零描边宽度（因为描边宽度会被忽略进行边界框计算），也不应使用关键字 objectBoundingBox。当适用元素的几何形状没有宽度或高度并且指定了 objectBoundingBox 时，则将忽略给定效果（如渐变或过滤器）。

如果你有一个水平线，为什么不使用带填充的矩形而不是带描边的线呢？或者使用 userSpaceOnUse 单位。