SVG蒙版是蒙版元素上的剪辑笔划

Question

我有一个完全垂直<path>，应用了粗笔画宽度。我想为它添加一个掩码（即mask="url(#...)"），但是当我这样做时，（我该怎么做？）在计算可见区域时忽略笔划。这是一段代码：

function toggleMask() {
  var path = $('path');
  if (path.attr('mask')) {
    path.removeAttr('mask');
  } else {
    path.attr('mask',"url(#test)");
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div><button onclick="toggleMask()">toggle mask</button></div>
<svg width="400" height="400">
  <defs>
    <mask id="test">
      <rect
            width="100%"
            height="100%"
            x="0"
            y="0"
            fill="white">
      </rect>
      <circle r="20" cx="35" cy="80" fill="black"></circle>
    </mask>
  </defs>
  <path
        d="M30,30L30,300"
        stroke-width="40"
        stroke="black"></path>
  <path
      d="M50,30L100,300"
      stroke-width="40"
      stroke="black"></path>
</svg>

我希望应用的蒙版看起来像这样：

提前致谢！

Answer 1

将maskUnits="userSpaceOnUse"添加到您的面具中，它将按您的意愿工作。

https://codepen.io/nerdmanship/pen/XazJVR

原因是当maskUnits属性未指定时，它默认为objectBoundingBox值，这意味着掩码应用于目标元素的边界框内的区域。完全垂直或水平路径的边界框的宽度或高度为0.结果是掩模应用于目标元素的0像素的总面积。

https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/maskUnits