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>

回答1:

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

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.

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.

来源：https://stackoverflow.com/questions/39475396/svg-mask-makes-line-disappear