SVG/clipPath

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

Mit dem clipPath-Element kann man Ausschnitte oder Silhouettten im Definitionsabschnitt festlegen und über eine ID einer beliebigen Form oder Grafik zuordnen. 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

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



Die Beschneideform wird über das clip-path-Attribut dem zu beschneidenden Element zugeordnet.



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
Beispiel 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" xlink:href="Burg.svg" clip-path="url(#normal)" />
  <image x="200" y="0" width="160" height="200" xlink:href="Burg.svg" clip-path="url(#spitz)" />
  <image x="400" y="0" width="160" height="200" xlink:href="Burg.svg" clip-path="url(#elegant)" />
Die Bilder erhalten mit dem clip-path-Attribut eine Beschneideform. 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 M400,0 noch ein relativer moveTo-Befehl m80,0 zur Symmetrieachse notiert.
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 mehrere Optionen wählen:

  • nonzero: volle Fläche wird ausgeschnitten
  • evenodd: der "äußere" Hintergrund wird ausgeschnitten, die "inneren" Felder bleiben verdeckt
Beispiel ansehen …
  <defs>
    <clipPath id="eins">
	  <polygon points="300,10 240,198 390,78 210,78 360,198" clip-rule="nonzero"/>
    </clipPath>  
    <clipPath id="zwei">
	  <polygon points="500,10 440,198 590,78 410,78 560,198" clip-rule="evenodd"/>
    </clipPath>  

  </defs>

  <polygon class="eins" points="100,10 40,198 190,78 10,78 160,198" /> 
 
  <rect x="200" y="0" width="200" height="200" fill="#dfac20" clip-path="url(#eins)" />
  <rect x="410" y="0" width="200" height="200" fill="#dfac20" clip-path="url(#zwei)" />
In diesem Beispiel werden 3 Sterne gezeichnet. Der erste Stern besteht aus einem polygon. Der zweite und dritte Stern wird aus einem gelben Rechteck erzeugt, über das die Beschneideformen, die das Polygon enthalten, gelegt werden. Während der mittlere Stern vollständig sichtbar ist, hat der rechte Stern das Attribut clip-rule="evenodd", so dass der innenliegende Teil zusammen mit dem Außenbereich ausgeschnitten wird.

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="500px" height="375px"
           xlink:href="http://wiki.selfhtml.org/images/5/57/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.

Weblinks[Bearbeiten]

  1. W3C: EstablishingANewClippingPath

Referenz[Bearbeiten]