Html 使用笔划属性的SVG掩码

我想用SVG路径屏蔽图像。但是，我不希望图像在路径主体中被遮罩。它应该在路径本身的笔划中隐藏

因此，如果我有一个正方形遮罩图像，图像将显示在正方形的边缘，而不是正方形内部。为了稍后设置此遮罩的动画，我希望使用笔划定义路径的厚度。我的想法是，我可以在正方形的边缘遮罩一个图像，然后使用stroke dasharray为遮罩设置动画。关于如何做到这一点有什么想法吗？

为什么要麻烦使用SVG

使用两个

div

元素可以实现同样的效果

#图像{
宽度：600px；
高度：400px；
位置：相对位置；
背景：url（'https://img.buzzfeed.com/buzzfeed-static/static/enhanced/webdr03/2013/9/13/11/enhanced-buzz-13525-1379086895-24.jpg'）中心/盖；
}
#面具{
宽度：500px；
高度：300px；
位置：绝对位置；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
背景：#fff；
}

---

您试过了吗？它不起作用的地方。它应该在以下方面发挥作用：