patternUnits

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

Das Attribut patternUnits gibt an, welches Koordinatensystem für die geometrischen Eigenschaften des <pattern>-Elements verwendet werden soll.

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

<pattern>

Beispiel

html,
body,
svg {
  height: 100%;
}

html

<svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg">
  <!-- All geometry properties are relative to the current user space -->
  <pattern
    id="p1"
    x="12.5"
    y="12.5"
    width="25"
    height="25"
    patternUnits="userSpaceOnUse">
    <circle cx="10" cy="10" r="10" />
  </pattern>

  <!-- All geometry properties are relative to the target bounding box -->
  <pattern
    id="p2"
    x=".125"
    y=".125"
    width=".25"
    height=".25"
    patternUnits="objectBoundingBox">
    <circle cx="10" cy="10" r="10" />
  </pattern>

  <!-- Left square with user space tiles -->
  <rect x="10" y="10" width="80" height="80" fill="url(#p1)" />

  <!-- Right square with bounding box tiles -->
  <rect x="110" y="10" width="80" height="80" fill="url(#p2)" />
</svg>

pattern

Für <pattern> definiert patternUnits das Koordinatensystem, das für die geometrischen Eigenschaften (x, y, width und height) des Elements verwendet wird.

Wert	`userSpaceOnUse` \| `objectBoundingBox`
Standardwert	`objectBoundingBox`
Animierbar	Ja

userSpaceOnUse: Dieser Wert gibt an, dass alle Koordinaten für die geometrischen Eigenschaften sich auf das Benutzerkoordinatensystem beziehen, wie es definiert wurde, als das Muster angewendet wurde.
objectBoundingBox: Dieser Wert gibt an, dass alle Koordinaten für die geometrischen Eigenschaften Brüche oder Prozentsätze des Begrenzungsrahmens des Elements repräsentieren, auf das das Muster angewendet wird. Ein Begrenzungsrahmen kann als dasselbe angesehen werden, als ob der Inhalt des <pattern> an ein "0 0 1 1" viewBox gebunden wäre.

Spezifikationen

Specification
Scalable Vector Graphics (SVG) 2 # PatternElementPatternUnitsAttribute

Browser-Kompatibilität

BCD tables only load in the browser