SVG Tutorial

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

<?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.