patternContentUnits

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 patternContentUnits Attribut gibt an, welches Koordinatensystem für den Inhalt des <pattern> Elements verwendet werden soll.

Hinweis: Dieses Attribut hat keine Wirkung, wenn das Attribut viewBox auf dem <pattern> Element angegeben ist.

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

<pattern>

Beispiele

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

html

<svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg">
  <!--
  A pattern tile that content coordinates and values are
  computed against the current coordinate user space.
  Note that the size of the tile is computed against
  the bounding box of the target element
  -->
  <pattern
    id="p1"
    width="20%"
    height="20%"
    patternContentUnits="userSpaceOnUse">
    <circle cx="10" cy="10" r="10" />
  </pattern>

  <!--
  A pattern tile that content coordinates and values are
  computed against the bounding box of the target element.
  Note that the size of the tile is also computed against
  the bounding box of the target element
  -->
  <pattern
    id="p2"
    width="20%"
    height="20%"
    patternContentUnits="objectBoundingBox">
    <circle cx=".1" cy=".1" r=".1" />
  </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>

Elemente

Sie können dieses Attribut mit den in den folgenden Abschnitten beschriebenen SVG-Elementen verwenden.

`<pattern>`

Für <pattern> definiert patternContentUnits, welches Koordinatensystem für den Inhalt des Elements verwendet wird.

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

userSpaceOnUse: Dieser Wert gibt an, dass sich alle Koordinaten innerhalb des <pattern> Elements auf das Benutzerkoordinatensystem beziehen, wie es definiert wurde, als die Mustervorlage erstellt wurde.
objectBoundingBox: Dieser Wert gibt an, dass sich alle Koordinaten innerhalb des <pattern> Elements relativ zum begrenzenden Rechteck des Elements beziehen, auf das das Muster angewendet wird. Ein begrenzendes Rechteck könnte als dasselbe betrachtet werden, als ob der Inhalt des <pattern> an eine "0 0 1 1" viewBox für eine Mustervorlage mit einer Breite und Höhe von 100 % gebunden wäre.

Spezifikationen

Specification
Scalable Vector Graphics (SVG) 2 # PatternElementPatternContentUnitsAttribute

Browser-Kompatibilität

BCD tables only load in the browser