html - 使用 Stroke 属性的 SVG 蒙版

Question

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

因此，如果我用一个正方形遮盖图像，图像将显示在正方形的边缘而不是正方形内部。为了稍后制作此蒙版的动画，我希望使用描边来定义路径的粗细。我的想法是，我可以遮住正方形边缘的图像，然后使用 stroke-dasharray 为 mask 设置动画。关于如何执行此操作的任何想法？

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/

或者你需要中间部分“透明”，这样你才能真正看到背景吗？？