clipPathUnits
Das Attribut clipPathUnits gibt an, welches Koordinatensystem für den Inhalt des Elements <clipPath> verwendet wird.
Sie können dieses Attribut mit den folgenden SVG-Elementen verwenden:
clipPath
Für <clipPath> definiert clipPathUnits das Koordinatensystem für den Inhalt des Elements.
| Wert | userSpaceOnUse | objectBoundingBox |
|---|---|
| Standardwert | userSpaceOnUse |
| Animierbar | Ja |
- userSpaceOnUse
-
Dieser Wert gibt an, dass sich alle Koordinaten innerhalb des Elements
<clipPath>auf das Benutzerkoordinatensystem beziehen, das bei der Erstellung des Beschneidungspfads festgelegt war. - objectBoundingBox
-
Dieser Wert gibt an, dass alle Koordinaten innerhalb des Elements
<clipPath>relativ zur Begrenzungsbox des Elements sind, auf das der Beschneidungspfad angewendet wird. Das bedeutet, dass der Ursprung des Koordinatensystems in der oberen linken Ecke der Begrenzungsbox liegt und Breite und Höhe der Begrenzungsbox jeweils als eine Einheit gelten.
Beispiel
<svg viewBox="0 0 100 100">
<clipPath id="myClip1" clipPathUnits="userSpaceOnUse">
<circle cx="50" cy="50" r="35" />
</clipPath>
<clipPath id="myClip2" clipPathUnits="objectBoundingBox">
<circle cx=".5" cy=".5" r=".35" />
</clipPath>
<!-- Some reference rect to materialized to clip path -->
<rect id="r1" x="0" y="0" width="45" height="45" />
<rect id="r2" x="0" y="55" width="45" height="45" />
<rect id="r3" x="55" y="55" width="45" height="45" />
<rect id="r4" x="55" y="0" width="45" height="45" />
<!-- The first 3 rect are clipped with userSpaceOnUse units -->
<use clip-path="url(#myClip1)" href="#r1" fill="red" />
<use clip-path="url(#myClip1)" href="#r2" fill="red" />
<use clip-path="url(#myClip1)" href="#r3" fill="red" />
<!-- The last rect is clipped with objectBoundingBox units -->
<use clip-path="url(#myClip2)" href="#r4" fill="red" />
</svg>
Spezifikationen
| Spezifikation |
|---|
| CSS Masking Module Level 1 # element-attrdef-clippath-clippathunits |