SVG/Masken
Mit dem mask-Element können Sie eine Schablone anlegen, die dann nur Teilbereiche einer beliebigen Form oder Grafik sichtbar macht[1].
Inhaltsverzeichnis
Funktionsweise
Im Unterschied zu einer Beschneidung mit clipPath, bei der außerhalb der Beschneideform stehende Teile einfach abgeschnitten werden, sind Masken Grafiken, die Sie auch für teiltransparente Schablonen verwenden können. Unter den Masken befindliche Objekte sind nur in transparenten Bereichen sichtbar. Dies können Sie durch Farbverläufe oder Filtereffekte erreichen.
Luminanzmaske
Die Maske wird in eine nicht sichtbare Ebene mit transparent-schwarzem Hintergrund projiziert. Die Farbwerte werden wie im Filter feColorMatrix mit der Einstellung luminance-to-alpha
in Graustufen umgewandelt. Weiße Flächen sind undurchsichtig, schwarz ist vollständig transparent. Diese Farbwerte werden dann mit der Alphamaske kombiniert.
Alphamaske
In der Alphamaske wird nur der Wert des s berücksichtigt. RGB-Werte ohne Werte im Alphakanal erhalten einen Wert von 1.
In der Praxis ergibt
- die Füllfarbe Weiß keine Transparenz;
- die Füllfarbe Schwarz volle Transparenz.
Die Maskenform wird im Definitionsabschnitt festgelegt und mit ihrer id
dem zu maskierenden Element über das mask-Attribut zugeordnet.
Anwendung
<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 & weiß
</text>
</defs>
<rect x="100" y="10" width="95" height="60" />
<use xlink:href="#Text" fill="white"/>
<use xlink:href="#Text" fill="black" mask="url(#Maske)"/>
Folgende Angaben sind möglich:
MaskUnits
: absolute oder relative KoordinatenuserSpaceOnUse
: (Standardwert) aktuelles Koordinatensystem soll verwendet werdenobjectBoundingBox
: Koordinaten passen sich an das zu beschneidende Element an
maskContentUnits
: definiert das Koordinatensystem für den Inhalt des Maskierungs-ElementsuserSpaceOnUse
: übernimmt Werte aus dem existierenden Koordinatensystem, in das die Maskierung eingebunden ist.objectBoundingBox
: (Standardwert) Koordinatensystem beginnt in der linken oberen Ecke des Elements und erstreckt sich auf die BoundingBox
Koordinaten:
x
: X-Wert der linken, oberen Ecke (Standardwert: -10%)y
: Y-Wert der linken, oberen Ecke (Standardwert: -10%)width
: Breite (Standardwert: 120%)height
: Höhe (Standardwert: 120%)
Mit diesen Attributen können Sie Position und Größe (Höhe und Breite) der Maske angeben. Nur innerhalb des Puffers gelegene Bereiche dienen auch als Maske.
teiltransparente Bereiche
Die Füllfarbe der Maskenform bestimmt den Grad der Transparenz der Maske. Sie können mit Verläufen weiche Übergange der Transparenzen erreichen. Je näher der Farbwert bei Weiß (#ffffff
) liegt, desto deckender ist die Maske, je näher bei Schwarz (#000000
), desto transparenter.[2]
<defs>
<linearGradient id="Verlauf1"
x1="0%" y1="0%"
x2="100%" y2="0%">
<stop offset="0%" stop-color="white"/>
<stop offset="100%" stop-color="black"/>
</linearGradient>
<mask id="Maske3" x="0" y="0" width="800" height="120" >
<rect x="0" y="0" width="800" height="120"
fill="url(#Verlauf1)"/>
</mask>
</defs>
<text x="10" y="100" >
Text im Hintergrund
</text>
<rect x="1" y="1" width="800" height="120"
style="fill: #3983ab; mask: url(#Maske3)"/>
</main>
Bilder mit Masken einblenden
<defs>
<lineargradient id="Verlauf1"
x1="0%" y1="0%"
x2="100%" y2="0%">
<stop offset="0%" stop-color="white"/>
<stop offset="80%" stop-color="black"/>
</lineargradient>
<radialGradient id="Verlauf2">
<stop offset="90%" stop-color="white"/>
<stop offset="100%" stop-color="black"/>
</radialGradient>
<mask id="Maske4">
<circle cx="200" cy="200" r="200"
fill="url(#Verlauf1)" />
</mask>
<mask id="Maske5">
<circle cx="200" cy="200" r="200"
fill="url(#Verlauf2)" />
</mask>
</defs>
<image x="0" y="0" width="400px" height="400px" transform="translate(50,0)"
xlink:href="http://wiki.selfhtml.org/images/a/a6/Lauf-1.jpg"
mask="url(#Maske4)">
<title>Lauf an der Pegnitz - normal ohne Filter</title>
</image>
<image x="0" y="0" width="400px" height="400px" transform="translate(500,0)"
xlink:href="http://wiki.selfhtml.org/images/a/a6/Lauf-1.jpg"
mask="url(#Maske5)">
<title>Lauf an der Pegnitz - normal ohne Filter</title>
</image>
Bilder mit weichen Kanten
Weiche Kanten durch radiale Verläufe lassen sich nur bei kreisförmigen Elementen erzeugen. Bei anderen Formen kann man einen Filter verwenden:
<defs>
<filter id="Filter1" x="-.33" y="-.33" width="1.5" height="1.5">
<feGaussianBlur stdDeviation="15"/>
</filter>
<mask id="Maske6" x="0" y="0" width="400" height="400">
<circle cx="200" cy="200" r="175"
fill="white" filter="url(#Filter1)"/>
</mask>
<mask id="Maske7" x="0" y="0" width="400" height="400">
<rect x="25" y="25" width="350" height="350"
fill="white" filter="url(#Filter1)"/>
</mask>
</defs>
<image x="0" y="0" width="400px" height="400px" transform="translate(50,0)"
xlink:href="http://wiki.selfhtml.org/images/a/a6/Lauf-1.jpg"
mask="url(#Maske6)">
<title>Lauf an der Pegnitz - normal ohne Filter</title>
</image>
<image x="0" y="0" width="400px" height="400px" transform="translate(500,0)"
xlink:href="http://wiki.selfhtml.org/images/a/a6/Lauf-1.jpg"
mask="url(#Maske7)">
<title>Lauf an der Pegnitz - normal ohne Filter</title>
</image>
Weblinks
- wikibooks.de: Maskierung, mask und mask
- css-tricks.com: Clipping and Masking in CSS
Der Text wird als symbol definiert und mit use zweimal aufgerufen:
- als weiße Schrift und dann noch
- als schwarze Schrift mit der Maske:
Die Maske beinhaltet ein weißes Rechteck, das die linke Hälfte des Hintergrunds verdeckt.