ストロークプロパティを使用したSVGマスク

Question

イメージをSVGパスでマスクする必要があります。しかし、私はパスの本体の中でマスクされた画像を望んでいません。パス自体のストロークでマスクする必要があります。

画像を四角形にすると、四角形の内側ではなく四角形のエッジに画像が表示されます。後でこのマスクをアニメーション化する目的で、ストロークを使用してパスの太さを定義します。アイデアは、私は四角形のエッジでイメージをマスクし、マスクをアニメーション化するためにstroke-dasharrayを使うことができるということです。これを行う方法に関するアイデア？

Answer 1

なぜSVGを使用するのですか？

2つの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/

それとも、実際に背景を見ることができるように、あなたは "透明" に真ん中が必要なのですか？