clipPathUnits

Das clipPathUnits Attribut gibt an, welches Koordinatensystem für den Inhalt des <clipPath>-Elements verwendet werden soll.

Sie können dieses Attribut mit den folgenden SVG-Elementen verwenden:

Beispiel

html
<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> definieren clipPathUnits das verwendete Koordinatensystem für den Inhalt des Elements.

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 bei der Erstellung des Clipping-Pfads definiert wurde.

objectBoundingBox

Dieser Wert gibt an, dass alle Koordinaten innerhalb des <clipPath>-Elements relativ zum Begrenzungsrahmen des Elements sind, auf das der Clipping-Pfad angewendet wird. Das bedeutet, dass der Ursprung des Koordinatensystems die obere linke Ecke des Begrenzungsrahmens des Objekts ist und die Breite und Höhe des Begrenzungsrahmens des Objekts als Länge von 1 Einheit betrachtet werden.

Spezifikationen

Specification
CSS Masking Module Level 1
# element-attrdef-clippath-clippathunits