0
我有一个完全垂直的<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中,当应用蒙版(并计算边界框,过滤器区域等)时,会忽略描边。 –