使用Stroke属性的SVG掩码

Question

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

因此，如果我有一个正方形遮罩图像，图像将显示在正方形的边缘，而不是正方形内部。为了稍后动画这个蒙版，我希望使用笔划来定义路径的粗细。这个想法是，我可以在一个正方形的边缘遮罩一个图像，然后使用笔划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/

还是你需要中间“透明”，这样你才能真正看到背景？？