SVG/Element/clipPath

Der Begriff clipPath ist mehrdeutig.
Die gleichnamige CSS-Eigenschaft finden Sie unter: CSS/Eigenschaften/clip-path.

Das clipPath-Element 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.

Syntax

Start-Tag: notwendig

End-Tag: notwendig

Elternelemente

Darf vorkommen in:
defs

erlaubte Inhalte

beliebige Anzahl von path-, text-Elementen oder grafische Elemente

Attribute

Name	Inhalt	Standardwert	Bedeutung
clipPathUnits	UserSpaceOnUse BoundingBox	UserSpaceOnUse
systemLanguage	IANA		Sprachkürzel
transform	CDATA

Attribut: Pflichtattribut
Attribut: optionales Attribut

Beispiel

  <defs>
    <clipPath id="normal">
	  <rect x="0" y="0" width="160" height="120"/>
	  <circle cx="80" cy="120" r="80" />
    </clipPath>  
  </defs>
 
  <image x="0"   y="0" width="160" height="200" href="Burg.svg" 
         clip-path="url(#normal)" />

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

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.

Siehe auch

• Masken und Beschneidungen
  Exkurs: clipPath (SVG)

Weblinks

• W3C: A New Clipping Path