clipPathUnits
Das clipPathUnits-Attribut gibt an, welches Koordinatensystem für den Inhalt des <clipPath>-Elements verwendet werden soll.
Dieses Attribut kann mit den folgenden SVG-Elementen verwendet werden:
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>
clipPath
Für <clipPath> definiert clipPathUnits das Koordinatensystem, das für den Inhalt des Elements verwendet wird.
| Wert | userSpaceOnUse | objectBoundingBox |
|---|---|
| Standardwert | userSpaceOnUse |
| Animierbar | Ja |
- userSpaceOnUse
-
Dieser Wert gibt an, dass alle Koordinaten innerhalb des
<clipPath>-Elements sich auf das Benutzerkoordinatensystem beziehen, wie es definiert wurde, als der Clipping-Pfad erstellt wurde. - objectBoundingBox
-
Dieser Wert gibt an, dass alle Koordinaten innerhalb des
<clipPath>-Elements relativ zur Begrenzungsbox des Elements sind, auf das der Clipping-Pfad angewendet wird. Das bedeutet, dass der Ursprung des Koordinatensystems die obere linke Ecke der Objektbegrenzungsbox ist und die Breite und Höhe der Objektbegrenzungsbox als eine Länge von einem Einheitenwert betrachtet werden.
Spezifikationen
| Spezifikation |
|---|
| CSS Masking Module Level 1 # element-attrdef-clippath-clippathunits |