patternUnits
Baseline
Weitgehend verfügbar
Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Januar 2020 browserübergreifend verfügbar.
Das Attribut patternUnits gibt an, welches Koordinatensystem für die geometrischen Eigenschaften des <pattern>-Elements verwendet werden soll.
Dieses Attribut kann mit den folgenden SVG-Elementen verwendet werden:
Beispiele
<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>
Elemente
Dieses Attribut kann mit den im Folgenden beschriebenen SVG-Elementen verwendet werden.
<pattern>
Für <pattern> definiert patternUnits das verwendete Koordinatensystem für die geometrischen Eigenschaften (x, y, width und height) des Elements.
| Wert | userSpaceOnUse | objectBoundingBox |
|---|---|
| Standardwert | objectBoundingBox |
| Animierbar | Ja |
userSpaceOnUse-
Dieser Wert zeigt an, dass sich alle Koordinaten für die geometrischen Eigenschaften auf das Nutzerkoordinatensystem beziehen, wie es definiert wurde, als das Muster angewendet wurde.
objectBoundingBox-
Dieser Wert zeigt an, dass alle Koordinaten für die geometrischen Eigenschaften Brüche oder Prozentsätze der Begrenzungsbox des Elements darstellen, auf das das Muster angewendet wird. Eine Begrenzungsbox könnte als dasselbe betrachtet werden, als wäre der Inhalt des
<pattern>an eine"0 0 1 1"viewBoxgebunden.
Spezifikationen
| Spezifikation |
|---|
| Scalable Vector Graphics (SVG) 2 # PatternElementPatternUnitsAttribute |