この codepen に見られるような効果を作成することを目指しています。背景ビデオの上に透明な SVG があります。これまでのところ、Photoshop からエクスポートしたパス形状が選択された AI ドキュメントがあります。理想的には、パスの内側を透明にしたいのですが、残りは例のように白くします。どうすればこのような効果を達成できますか?
このコード行と関係があるように見えますが、私は間違いなく何かを誤解しています。
svg > rect {
fill: white;
-webkit-mask: url(#mask);
mask: url(#mask);
}
SVG はパスだけでは準備ができていないと思います。エクスポートした場合は空白として表示され、パスにストロークを配置すると、ストローク以外のすべてが透明であるか、透明度が表示されないためです。まったく。
通常、Web 開発者としての私のワークフローでは、SVG でこれを詳細に作業することは決してないため、これには少し行き詰まっています。