我想用 SVG 路径遮盖图像。但是,我不希望图像在路径主体内被遮盖。它应该在路径本身的笔划中被掩盖。
因此,如果我用一个正方形遮盖图像,图像将显示在正方形的边缘而不是正方形内部。为了稍后制作此蒙版的动画,我希望使用描边来定义路径的粗细。我的想法是,我可以遮住正方形边缘的图像,然后使用 stroke-dasharray 为 mask 设置动画。关于如何执行此操作的任何想法?
最佳答案
为什么要费心使用 SVG?
您可以使用两个 div
元素实现相同的目的。
#image {
width: 600px;
height: 400px;
position: relative;
background: url('https://img.buzzfeed.com/buzzfeed-static/static/enhanced/webdr03/2013/9/13/11/enhanced-buzz-13525-1379086895-24.jpg') center/cover;
}
#mask {
width: 500px;
height: 300px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: #fff;
}
<div id="image">
<div id="mask">
</div>
</div>
https://jsfiddle.net/ztf1cv08/1/
或者你需要中间部分“透明”,这样你才能真正看到背景吗??
关于html - 使用 Stroke 属性的 SVG 蒙版,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42432261/