SVG/clipPath

Aus SELFHTML-Wiki
< SVG
Wechseln zu: Navigation, Suche

SVG ermöglicht Beschneidungen von Grafikobjekten. Mit dem clipPath-Element kann man Ausschnitte oder Silhouettten im Definitionsabschnitt festlegen. Die Fläche innerhalb des durch einen Beschneidepfad festgelegten Umrisses bildet den transparenten Bereich der Grafik, Fläche außerhalb der Schablone wird nicht dargestellt. [1]

  • SVG 1.0
  • Chrome
  • Firefox
  • IE 9
  • Opera
  • Safari

Die Beschneideform wird über ihre id im clip-path-Attribut dem zu beschneidenden Element zugeordnet.

Der Titel dieses Artikels ist mehrdeutig. Die gleichnamige CSS-Eigenschaft finden Sie unter: CSS/Eigenschaften/Anzeige/clip-path.



clipPath[Bearbeiten]

Das clipPath-Element kann beliebig viele Kind-Elemente wie Grundformen, Pfade oder Text haben. Sie bilden eine gemeinsame Grundfläche bzw. Silhouette, die den transparenten Bereich der Schablone darstellt.

Folgende Angaben sind möglich:

  • clipPathUnits: absolute oder relative Koordinaten
    • userSpaceOnUse: (Standardwert) aktuelles Koordinatensystem soll verwendet werden
    • objectBoundingBox: Koordinaten passen sich an das zu beschneidende Element an
  • clip-rule:
    • nonzero: volle Fläche wird ausgeschnitten
    • evenodd: der "äußere" Hintergrund wird ausgeschnitten, die "inneren" Felder bleiben verdeckt
Beschneidung eines rechteckigen Bilds ansehen …
  <defs>
    <clipPath id="normal">
	  <rect x="0" y="0" width="160" height="120"/>
	  <circle cx="80" cy="120" r="80" />
    </clipPath>  
    <clipPath id="spitz">
      <path class="wappen" d="m200,0 h160 l-10,10 v130 a50,50 0 0,1 -50,50 a20,20 0 0,0 -20,10 a20,20 
                              0 0,0 -20,-10 a50,50 0 0,1 -50,-50 v-130z"/>
    </clipPath>  
    <clipPath id="elegant">
      <path class="wappen" d="M400,0 m80,0 q35,20 70,10 l10,10 q-20,70 0,100 q-10,50 -80,80 q-50,-20
                             -80,-80 q20,-35 0,-100 l10,-10 q23,15 70,-10" />
    </clipPath>  
  </defs>

 
  <image x="0"   y="0" width="160" height="200" href="Burg.svg" clip-path="url(#normal)" />
  <image x="200" y="0" width="160" height="200" href="Burg.svg" clip-path="url(#spitz)" />
  <image x="400" y="0" width="160" height="200" href="Burg.svg" clip-path="url(#elegant)" />

Die rechteckigen Bilder erhalten mit dem clip-path-Attribut unregelmäßige Beschneideformen. Der Wert des clip-Path-Attributs entspricht der id des clipPath-Elements.

Die erste Beschneideform besteht aus einem Quadrat und einem Kreis, die sich zur Wappenform ergänzen; die zweite und dritte Form werden von einem Pfad festgelegt. Um die Symmetrie der dritten Silhouette zu erhalten, wird nach dem ersten moveTo-Befehl M 400,0 noch ein relativer moveTo-Befehl m 80,0 zur Symmetrieachse notiert.

Um die Beschneideform zu akzentuieren, wurde der (unsichtbare) Beschneidepfad dupliziert und anschließend als Grafikobjekt dargestellt, wobei nur die Randline zu sehen ist und die Fläche dank fill: none; durchsichtig ist.

Beachten Sie: Die Koordinaten der zu beschneidenden Form und des clipPath-Elements müssen übereinstimmen.

clip-rule[Bearbeiten]

Analog zum Attribut fill-rule können Sie beim Ausschnitt Füllmethoden festlegen, falls sich einzelne Linien überschneiden:

  • nonzero: volle Fläche wird ausgeschnitten
  • evenodd: der "äußere" Hintergrund wird ausgeschnitten, die "inneren" Felder bleiben verdeckt
Beschneideform mit überschneidenden Linien ansehen …
 <defs>
    <clipPath id="eins">
	  <polygon points="200,10 140,198 290,78 110,78 260,198" clip-rule="nonzero"/>
    </clipPath> 
    <clipPath id="zwei">
	  <polygon points="200,10 140,198 290,78 110,78 260,198" clip-rule="evenodd"/>
    </clipPath>  

  </defs>
 
  <polygon id="original" points="200,10 140,198 290,78 110,78 260,198" /> 

  <image x="330" y="10" width="300" height="200" href="Alaska-rockies.jpg"/>
    
  <image x="10" y="0"  transform="translate(10,210)" width="300" height="200" 
    href="Alaska-rockies.jpg" 
    clip-path="url(#eins)" />

  <image x="10" y="0"  transform="translate(320,210)" width="300" height="200" 
     href="Alaska-rockies.jpg" 
     clip-path="url(#zwei)" />

In diesem Beispiel dient ein Stern als Beschneideform. Er besteht aus einem polygon mit sich überschneidenden Linien - eine Grafik die dies vermeidet, würde die doppelte Anzahl Linien erfordern. Im Definitionsabschnitt wird dieser Stern zweimal innerhalb eines ClipPath-Elements notiert; erhält aber unterschiedliche Werte im clip-rule-Attribut.

Nujn wird eine Rastergrafik per image-Element referenziert und mit dem clip-path-Attribut wird die Beschneideform, die das Polygon enthält, über das Foto gelegt.

Während der linke, untere Stern vollständig sichtbar ist, hat der rechts unten referenzierte Stern das Attribut clip-rule="evenodd", so dass der innenliegende Teil zusammen mit dem Außenbereich ausgeschnitten wird.

Anwendungsbeispiele[Bearbeiten]

Animation der Beschneideform[Bearbeiten]

Natürlich ist es möglich, die Beschneideform mit SMIL zu animieren:

  <defs>
    <clipPath id="clips">
        <circle cx="30" cy="400" r="330">
            <animate 
                attributeName="cx" 
                dur="15" 
                values="-100;2100;-100" 
                repeatDur="indefinite"/>
            <animate 
                attributeName="r" 
                dur="15" 
                values="100; 450; 250; 250; 250; 30; 250; 250; 250; 450; 100" 
                repeatDur="indefinite"/>       
        </circle>
    </clipPath>
  </defs>
 
  <image x="0" y="50" width="2000" height="800" href="TotemPole.jpg"  clip-path="url(#clips)"/>

Die Beschneideform besteht aus einem Kreis. Das entsprechende circle-Element enthält zwei animate-Elemente, die cx und r animieren. Der Suchscheinwerfer ist außerhalb des sichtbaren Bereichs, sodass das gesamte Bild ausgeschnitten ist.

Im Verlauf der Animation bewegt sich die Beschneideform über das Bild und schneidet den Bereich der Suchscheinwerfers aus dem Bild und stellt diesen dar.

Text als Beschneideform[Bearbeiten]

Beispiel ansehen …
  <defs>
    <clipPath id="beschneideform">
      <text stroke="black" x="10" y="200">USA</text>
    </clipPath>  
  </defs>

  <g style="clip-path: url(#beschneideform);"> 
    <image x="10" y="10" width="500" height="375"
           href="Alaska-rockies.jpg">
      <title>Rockie Mountains</title>
    </image>	
  </g>

Das Gruppierungselement, das ein image-Element enthält, wird von der Beschneideform überlagert. So wird nur der Bereich des Textes sichtbar.

Fazit[Bearbeiten]

Mit SVG lassen sich interessante Beschneidungen ohne die vorherige Benutzung eines Grafikprogramms realisieren. Mittlerweile ist es möglich, SVG-Beschneideformen über die CSS-Eigenschaft clip-path einfach auf HTML-Elemente anzuwenden.

Weblinks[Bearbeiten]

  1. W3C: EstablishingANewClippingPath

Referenz[Bearbeiten]