SVG與透明度

Question

我打算創造就像一個found on this codepen的效果。 SVG在背景視頻上具有透明度。到目前爲止，我有選擇的，我從Photoshop導出的路徑形狀的AI文件。理想的情況是我想要的路內是透明的，但其餘的是白色的，就像在本例中。我怎樣才能達到這樣的效果？

它看起來像它有事情做這一行的代碼，但我肯定誤解的東西。

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

我不認爲我的SVG準備與只是作爲一個路徑，如果我出口它，它顯示爲空白，如果我把一個描邊路徑上的任何一切，但行程是透明的，或者沒有任何透明度。

通常我的工作流程作爲一個Web開發人員從來沒有我這個工作與SVG的深度，所以我在這一個有點卡住了。

Answer 1

在CSS規則的#mask，是指在SVG這個元素：

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

您可以瞭解口罩由reading the SVG specification或在網絡上現有的許多教程之一是如何工作的。