SVG/Elemente/clipPath
Aus SELFHTML-Wiki
Der Titel dieses Artikels 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.
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.
Siehe auch
Weblinks
- W3C: A New Clipping Path
Start-Tag: notwendig End-Tag: notwendig <clipPath>…</clipPath> | |
Elternelemente | Darf vorkommen in: |
---|---|
erlaubte Inhalte | beliebige Anzahl von path-, text-Elementen oder grafische Elementegrafische Elemente |
Attribut: Pflichtattribut
Attribut: optionales Attribut
Grundformen
- Struktur und Gruppierungen
- Metadaten
- Text
- weitere Elemente
- Animationen
- Beschneidungen und Masken
- clipPath
- mask
- Filter
- Muster und Verläufe