SVG遮罩使线条消失 [英] SVG Mask makes line disappear

问题描述

在下面的示例中，遮罩在绿线和蓝线上均应正常工作，但使水平红线完全消失.除去遮罩后，红线似乎没有问题.发生了什么事?

In my example below, the mask works as it should on the green and blue lines, but makes the horizontal red line disappear altogether. When the mask is removed, the red line seems to have nothing wrong with it. What's going on?

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>

推荐答案

maskUnits是objectBoundingBox . 规范文本的最后一段中介绍了您遇到的关键问题.

The default for maskUnits is objectBoundingBox. The key issue you have is described in the last paragraph of the specification text.

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

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.

如果您有水平线，为什么不使用带有填充的矩形而不是带有笔触的线?或者，也可以使用userSpaceOnUse单位.

Why not use a rect with a fill rather than a line with a stroke if you've got a horizontal line? Or alternatively use userSpaceOnUse units.

这篇关于SVG遮罩使线条消失的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！