SVG/Element/mask

Das mask-Element legt eine Schablone an, die dann nur Teilbereiche einer beliebigen Form oder Grafik sichtbar macht.

Syntax

Start-Tag: notwendig

End-Tag: notwendig

Elternelemente

Darf vorkommen in:
defs

erlaubte Inhalte

beliebige Anzahl von path-, text-Elementen oder grafischen Elementen

Attribute

Name	Inhalt	Standardwert	Bedeutung
height	NUMBER	120%	Höhe
maskUnits	userSpaceOnUse, objectBoundingBox	objectBoundingBox
maskContentUnits	userSpaceOnUse (Standardwert) BoundingBox	userSpaceOnUse
systemLanguage	IANA		Sprachkürzel
transform	CDATA
width	NUMBER	120%	Breite
x	NUMBER	-10%	X-Koordinate
y	NUMBER	-10%	Y-Koordinate

Attribut: Pflichtattribut
Attribut: optionales Attribut

Beispiel

    <defs>
        <mask id="Maske" maskUnits="userSpaceOnUse"
              x="0" y="0" width="200" height="80">
            <rect x="0" y="0" width="100" height="80" fill="white"/>
        </mask>

        <text id="Text" x="84" y="48" 
              font-size="20" font-weight="bold" text-anchor="middle">
            schwarz &amp; weiß 
        </text>
    </defs>

    <use href="#Text" fill="black" mask="url(#Maske)"/>

Der Hintergrund besteht aus einem schwarzen Rechteck (Ohne Angabe einer Füllfarbe wird der Standardwert schwarz verwendet.).

Der Text wird als symbol definiert und mit use zweimal aufgerufen:

1. als weiße Schrift und dann noch
2. als schwarze Schrift mit der Maske:

Die Maske beinhaltet ein weißes Rechteck, das die linke Hälfte des Hintergrunds verdeckt.

Beachten Sie: Werden die Größen-Attribute (x,y, width, height) nicht angegeben, werden die Standardwerte angenommen, für x und y '-10%' und für width und height '120%'.

Siehe auch

• Masken und Beschneidungen/Masken

Weblinks

• W3C: Mask Element