SVG/Element/clipPath
Aus SELFHTML-Wiki
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
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.
Siehe auch
Weblinks
- W3C: A New Clipping Path
Grundformen
- Struktur und Gruppierungen
- Metadaten
- Text
- weitere Elemente
- Animationen
- Beschneidungen und Masken
- clipPath
- mask
- Filter
- Muster und Verläufe