SVG с прозрачностью

Question

Я стремлюсь создать эффект, подобный тому, который есть в этом коде. Есть SVG с прозрачностью поверх фонового видео. Пока у меня есть документ AI с выбранной формой пути, который я экспортировал из фотошопа. В идеале я хочу, чтобы внутренняя часть пути была прозрачной, а остальное было белым, как в примере. Как я могу добиться такого эффекта?

похоже, это как-то связано с этой строкой кода, но я определенно что-то неправильно понимаю.

svg > rect {
    fill: white;
    -webkit-mask: url(#mask);
    mask: url(#mask);
}

Я не думаю, что мой SVG готов к тому, чтобы быть просто путём, как если бы я экспортировал его, он показался пустым, и если я поместил обводку на пути, либо всё, кроме обводки, было прозрачным, или оно не появилось с какой-либо прозрачностью совсем.

обычно мой рабочий процесс как веб-разработчика никогда не заставляет меня углубленно работать с SVG, поэтому я немного застрял в этом.

Answer 1

#mask в этом правиле CSS, ссылается на этот элемент в SVG:

<mask id="mask" x="0" y="0" width="1920" height="1080" >
...
</mask>

Вы можете узнать о том, как работают маски, прочитав спецификацию SVG или одно из многих учебных пособий, доступных в Интернете.