透明な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やウェブ上で利用できる多くのチュートリアルのいずれかでどのように機能するかについて学ぶことができます。