SVG蒙板是在遮罩元素上剪裁描边

问题描述：

我有一个完全垂直的<path>，应用了较厚的描边宽度。我想给它添加一个遮罩（即mask="url(#...)"），但是当我这样做时，（我该如何放置它？）当计算可见区域时，笔划被忽略。这里有一个代码片段：SVG蒙板是在遮罩元素上剪裁描边

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>

我预计应用于口罩，看起来像这样：

提前感谢！

这是按设计工作。在SVG中，当应用蒙版（并计算边界框，过滤器区域等）时，会忽略描边。 –

答

将maskUnits="userSpaceOnUse"添加到您的面具，它会工作，只要你想。

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

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

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

SVG蒙板是在遮罩元素上剪裁描边

相关推荐