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>

我預計應用於口罩，看起來像這樣：

提前感謝！

來源

2017-02-28 AndyPerlitch

這是按設計工作。在SVG中，當應用蒙版（並計算邊界框，過濾器區域等）時，會忽略描邊。 –

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

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

的原因是，當maskUnits屬性是未指定其默認爲objectBoundingBox值，這意味着該掩模施加到目標元素的邊框內的區域。完全垂直或水平路徑的邊界框的寬度爲或，高度爲0.結果是將蒙版應用於目標元素的總像素爲0像素。

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

來源

2017-08-15 12:19:56 Johan

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

回答

相關問題