SVG教程

SVG-Elemente

SVG <Animation> Animationselement SVG <clipPath> Element

SVG <mask> Element

Mit der SVG-Maskenfunktion können Sie Masken auf SVG-Formen anwenden. SVG-Masken sind eine fortgeschrittene Version von Schnittwegen und werden verwendet, um zu bestimmen, welche Teile der SVG-Form sichtbar sind und welche Transparenz sie haben.

In SVG können Sie eine transparente Maskenschicht mit dem aktuellen Objekt kombinieren, um den Hintergrund zu bilden. Eine transparente Maskenschicht kann jeder andere Grafikobjekt oder <g>-Element sein. Das mask-Element wird verwendet, um solche Maskenelemente zu definieren. Das Attribut mask wird verwendet, um auf ein Maskenelement zu verweisen.

Online-Beispiel

Erstellen Sie eine blaue Rechteckmaske

Beispiel

<svg　height="450"　width="450">
　<defs>
　　<mask　id="mask1"　x="0"　y="0"　width="100"　height="100"　>
　　　　<rect　x="0"　y="0"　width="100"　height="100"
　　　　　　　　style="stroke:none;　fill:　#ffffff"/>
　　</mask>
</defs>
<rect x="1"　y="1" width="200"　height="200"
　　　　style="stroke:　none;　fill:　#0000ff;　mask:　url(#mask1)"/>
</svg>

Testen Sie heraus‹/›

Das Ergebnis nach dem Ausführen ist wie folgt:

Verwendungshinweis

Das id-Attribut des <mask>-Elements definiert den eindeutigen Namen der Maske.
Der <rect>-Element des <mask> definiert die Form der Maske.
Der style-Attribut des <rect>-Elements gibt dem mask ID-Element die mask CSS-Eigenschaft.

Mehr Online-Beispiele

Textmaskeffekt

Beispiel

<svg　width="200"　height="80"　
　　　　　viewBox="0　0　200　80"　version="1.1"
　　　　　xmlns="http://www.w3.org/2000/svg"　
　　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　　　<defs>
　　　　　　　　<mask　id="myMask"　maskUnits="userSpaceOnUse"
　　　　　　　　　　　　　　x="0"　y="0"　width="200"　height="80">
　　　　　　　　　　　　<rect　x="0"　y="0"　width="100"　height="80"　fill="weiß"/>
　　　　　　　　</mask>
　　　　　　　　<text　id="Text"　x="100" y="48"　
　　　　　　　　　　　　　　font-size="26"　font-weight="fett"　text-anchor="middle">
　　　　　　　　　　　　Schwarz & Weiß
　　　　　　　　</text>
　　　　</defs>
　　　　<!--　Zeichnen Sie auf dem Hintergrund einen schwarzen Rechteck　-->
　　　　<rect x="100" y="10" width="95" height="60"></rect>
　　
　　　　<!--　Zeichnen Sie den Textstring zweimal. Zuerst, weißer Text ohne Maskierung. Zweite, schwarzer Text mit Maskierung-->
　　　　<use xlink:href="#Text" fill="white"/></use>
　　　　<use xlink:href="#Text" fill="black" mask="url(#myMask)"/></use>
</svg>

Testen Sie es heraus ‹/›

Das Ergebnis nach dem Ausführen ist wie folgt:

SVG <Animation> Animationselement SVG <clipPath> Element