SELFHTML wird 30 Jahre alt!
Die Mitgliederversammlung findet am 24.05.2025 um 10:00 statt. Alle Mitglieder und Interessierte sind herzlich eingeladen.
Davor und danach gibt es Gelegenheiten zum gemütlichen Beisammensein. → Veranstaltungs-Ankündigung.
SVG/Element/clipPath
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
<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)" />
- 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 einerviewBox="0 0 1 1"
zeichnen.
Siehe auch
- Masken und Beschneidungen
Exkurs: clipPath (SVG)
Weblinks
- W3C: A New Clipping Path
- Struktur und Gruppierungen
- Metadaten
- Text
- weitere Elemente
- Animationen
- Beschneidungen und Masken
- clipPath
- mask
- Filter
- Muster und Verläufe