使用描边属性的SVG遮罩

Question

我想用SVG路径遮罩图像。但是，我不希望图像在路径的主体内被遮罩。它应该在路径本身的中风中被掩盖。

所以，如果我有一个正方形掩盖图像，图像将显示在广场的边缘，而不是在广场内。为了稍后对此蒙版进行动画处理，我希望使用描边来定义路径的粗细。我的想法是，我可以在正方形的边缘掩盖图像，然后使用stroke-dasharray为掩膜设置动画。任何想法如何做到这一点？

Answer 1

为什么要使用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/

还是需要中间的 “透明”，这样你可以看到背景？