使用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/

還是您需要將中間部分設為“透明”，才能真正看到背景？