Ein Masking wird durch die Verwendung des Container-Elements
mask innerhalb des defs-Bereich
einer SVG Grafik definiert.
Das Element mask darf, wie auch schon
das Element clip-path, eine
beliebige Anzahl von
path-Elementen,
text-Elementen und geometrischen Grundformen
(rect, circle,
ellipse, polyline,
polygon) als Kind-Elemente enthalten.
Im Unterschied zum clipPath-Element, dürfen die Kind-Elemente von
mask durchaus mit Eigenschaften zur Darstellung
definiert werden (z.B. durch Farbverläufe oder
Filtereffekte). Auf diese Weise können Sie halbtransparente
Schablonen erzeugen.
Beachten Sie: Wenn Sie die Elemente der Maske mit der Farbe weiß
füllen, erhalten Sie volle Transparenz, wenn Sie als Füllfarbe schwarz
verwenden erhalten Sie keine Transparenz.
Dem mask-Element stehen die Attribute x,
y, width und
height zur Verfügung. Damit können Sie die
Ausmasse der Maske festlegen. Voreinstellung für
x und y ist
jeweils -10%,
Voreistellung für width und height
jeweils 120%.
Das Attribut maskUnits
regelt wie die Werte von x,
y, width und
height interpretiert werden.
In der Voreinstellung boundingBox
werden die Angaben relativ betrachtet, d.h.
es sind relative Werte für x,
y, width und
height zu verwenden,
bei Verwendung von userSpaceOnUse repräsentieren die Werte das
momentan gültige Koordinatensystem.
Durch das Attribut maskContentUnits im
mask-Element
bestimmen Sie, ob die Koordinaten und Längenangaben innerhalb
der Kind-Elemente von mask die
Werte des augenblicklichen Koordinatensystems repräsentieren (Voreinstellung
userSpaceOnUse) oder ob relative Werte verwendet
werden müssen (boundingBox).
Die durch mask erzeugte Maske (Schablone),
welche durch das Attribut
id eine eindeutigen Bezeichnung erhalten muß, wird
von Objekten durch das Attribut
mask referenziert. Dabei erhält
mask als Wert die URI der Schablone.
Beispiel Quellcode
Grafische Darstellung:
SVG-Darstellung (nur SVG-fähige Browser!)
Screenshot JPG-Grafik
<?xml version="1.0" encoding="ISO-8859-1" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="360px" height="510px"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>Das mask-Element</title>
<desc>
Dieses Beispiel für Masking beinhaltet 2 Masken
mit semi-transparenten Füllungen.
</desc>
<defs>
<style type="text/css">
<![CDATA[
text {font-family:Verdana,sans-serif; font-size:36px;
font-weight:bold; fill:white;}
rect {fill:none; stroke:white; stroke-dasharray:5,2;}
]]>
</style>
<!-- Verlauf für Maske m1 -->
<linearGradient id="verlauf"
x1="0" y1="0" x2="1" y2="0">
<stop offset="0" stop-color="white" />
<stop offset=".8" stop-color="black" />
</linearGradient>
<!-- Weichzeichnungsfilter für Maske m2 -->
<filter id="filter" x="-.3" y="-.3" width="1.6" height="1.6">
<feGaussianBlur stdDeviation="15" />
</filter>
<!-- zwei Masken: m1 und m2 -->
<mask id="m1">
<g fill="url(#verlauf)">
<circle cx="80" cy="110" r="50" />
<circle cx="180" cy="130" r="80" />
<circle cx="280" cy="150" r="50" />
</g>
</mask>
<mask id="m2">
<circle cx="180" cy="380" r="90"
style="fill:white;" filter="url(#filter)" />
</mask>
</defs>
<!-- schwarzer Hintergrund -->
<rect x="0" y="0" width="360" height="510"
style="fill:black; stroke:none;" />
<!-- die Masken werden von zwei image-Elementen referenziert -->
<image x="20" y="10" width="320" height="240" xlink:href="raupen.jpg"
mask="url(#m1)" />
<image x="20" y="260" width="320" height="240" xlink:href="raupen.jpg"
mask="url(#m2)" />
<!-- Hilfslinien: Umrisse der eingebundenen Grafiken -->
<rect x="20" y="10" width="320" height="240" />
<rect x="20" y="260" width="320" height="240" />
<text x="95" y="265">Masking</text>
</svg>
Im obigen Beispiel werden im defs-Bereich
durch das mask-Element zwei Masken m1
und m2 definiert. m1
enthält drei Kreise, m2 einen Kreis als Kind-Element.
Auf diese Weise wird der sichtbaren Bereich (der Ausschnitt) für das
referenzierenden Element festgelegt.
Diese beide Masken werden jeweils von einem image-Element
durch das Atttribut mask referenziert.
So ist von der Grafik, die vom ersten image-Element
eingebunden wird lediglich der Ausschnitt sichtbar,
der durch die drei Kreise der Maske m1 festgelegt wurde.
Dabei wurde jedem der drei Kreise als Füllung ein linearer Farbverlauf von
weiß nach schwarz zugeordnet. Dadurch nimmt die Transparenz innerhalb der Kreise
von links nach rechts ab.
In der zweiten Maske m2 wird dem
weiß gefüllten circle-Element
ein Weichzeichnungsfilter zugeordnet. Dadurch
werden die Ränder der Maske semi-transparent.
|