使用描邊屬性的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/

還是需要中間的 「透明」，這樣你可以看到背景？