SVG/Tutorials/Masken und Beschneidungen

Aus SELFHTML-Wiki
< SVG‎ | Tutorials(Weitergeleitet von ClipPath)
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]

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

clipPath

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: Der gezeichnete clipPath wird auf die Größe des zu beschneidenden Elements skaliert.
Beachten Sie:
  • Wenn Sie userSpaceOnUse verwenden, müssen die Koordinaten in Ihrem clipPath zu den Koordinaten des zu beschneidenden Bildes passen.
  • Wenn Sie objectBoundingBox verwenden, müssen Sie Ihren clipPath in einer viewBox="0 0 1 1" zeichnen.

Für SVG-Grafikelemente innerhalb eines <clipPath> Elements ist ein zusätzliches Attribut möglich, das die Wirkung dieses Elements im <clipPath> festlegt:

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

clip-rule

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.

Nun wird eine Rastergrafik per image-Element referenziert. 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", sodass der innenliegende Teil zusammen mit dem Außenbereich ausgeschnitten wird.

Anwendungsbeispiele

Animation der Beschneideform

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

Achtung!

Nutzer des Firefox können SMIL im Frickl nicht ausprobieren, da die animate-Elemente nicht gerendert werden.
Öffnen Sie das Beispiel mit einem Klick auf Vorschau in einem neuen Tab!
  <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

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

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

  1. W3C: EstablishingANewClippingPath

Referenz