SVG Tutorial

Clipping wird in SVG mit dem Container-Element clipPath im defs-Bereich der Grafik realisiert. Das Element clipPath darf eine beliebige Anzahl von path-Elementen, text-Elementen und geometrischen Grundformen (rect, circle, ellipse, polyline, polygon) als Kind-Elemente enthalten, deren gemeinsame Grundfläche bzw. Silhouette, den transparenten Bereich der Schablone darstellt.

Durch das Attribut clipPathUnits im clipPath-Element wird festgelegt, ob die Koordinaten und Längenangaben innerhalb der Kind-Elemente von clipPath die Werte des augenblicklichen Koordinatensystems repräsentieren (Voreinstellung userSpaceOnUse) oder ob relative Werte verwendet werden müssen (boundingBox).

Innerhalb der Kind-Elemente von clipPath können Sie zusätzlich das Attribut clip-rule verwenden. Dieses Attribut akzeptiert die Werte nonzero (Voreinstellung) und evenodd. Bei Verwendung von evenodd kehren sich der innere und der äußere Bereich des Elements um, d.h. der zuvor transparente Bereich des Elements, ist jetzt nicht-transparent und umgekehrt.
Leider wird dieses Attribut vom SVG Viewer 3.0 noch nicht unterstützt.

Die durch clipPath erzeugte Schablone, welche durch das Attribut id eine eindeutigen Bezeichnung erhalten muß, wird von Objekten durch das Attribut clip-path referenziert. Dabei erhält clip-path 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 clipPath-Element</title>
  <desc>
    Dieses Beispiel für Clipping beinhaltet 2 Clip-Pfade,
    von denen einer animiert wird.
  </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>

<!-- zwei Clip-Pfade: cp1 und cp2 -->
    <clipPath id="cp1">
      <circle cx="80" cy="110" r="50" />
      <circle cx="180" cy="130" r="80" />
      <circle cx="280" cy="150" r="50" />
    </clipPath>
    <clipPath id="cp2">
      <circle id="clippie" cx="-10" cy="380" r="30" />
    </clipPath>
  </defs>

<!-- schwarzer Hintergrund -->
  <rect x="0" y="0" width="360" height="510"
    style="fill:black; stroke:none;" />

<!-- die Clip-Pfade werden von zwei image-Elementen referenziert -->
  <image x="20" y="10" width="320" height="240" xlink:href="raupen.jpg"
    clip-path="url(#cp1)" />
  <image x="20" y="260" width="320" height="240" xlink:href="raupen.jpg"
    clip-path="url(#cp2)" />

<!-- der Clip-Pfad cp2 wird animiert -->
  <animate xlink:href="#clippie"
    attributeType="XML" attributeName="cx"
    begin="0" dur="12"
    values="-10;380;-10"
    repeatDur="indefinite" />
  <animate xlink:href="#clippie"
    attributeType="XML" attributeName="r"
    begin="0" dur="12"
    values="10;110;10;110;30"
    repeatDur="indefinite" />

<!-- 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">Clipping</text>
</svg>
      

Im obigen Beispiel werden zwei Clip-Pfade cp1 und cp2 definiert. cp1 enthält drei Kreise, cp2 einen Kreis als Kind-Element. Auf diese Weise wird der sichtbare Bereich (der Ausschnitt) für das referenzierende Element festgelegt.

Diese beiden Clip-Pfade werden jeweils von einem image-Element durch das Atttribut clip-path referenziert. So ist von der Grafik, die vom ersten image-Element eingebunden wird lediglich der Ausschnitt sichtbar, der durch die drei Kreise im Clip-Pfad cp1 festgelegt wurde.
Beachten Sie, dass den Kind-Elementen von clipPath keine Eigenschaften für Füllung oder Randlinie zugeordnet wird, da diese hier keine Bedeutung haben.

Im zweiten Clip-Pfad cp2 wird der Wert der x-Koordinate und der Wert des Radius des Kind-Elements circle zusätzlich durch zwei animate-Elemente verändert.