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 Geometrieeigenschaften des <pattern>-Elements verwendet wird.
Sie können dieses Attribut mit dem folgenden SVG-Element verwenden:
Elemente
Sie können dieses Attribut mit den in den folgenden Abschnitten beschriebenen SVG-Elementen verwenden.
<pattern>
Für <pattern> legt patternUnits das Koordinatensystem für die Geometrieeigenschaften (x, y, width und height) des Elements fest.
| Wert | userSpaceOnUse | objectBoundingBox |
|---|---|
| Standardwert | objectBoundingBox |
| Animierbar | Ja |
userSpaceOnUse-
Dieser Wert gibt an, dass sich alle Koordinaten der Geometrieeigenschaften auf das Benutzerkoordinatensystem beziehen, wie es zum Zeitpunkt der Anwendung des Musters definiert war.
objectBoundingBox-
Dieser Wert gibt an, dass alle Koordinaten der Geometrieeigenschaften Bruchteile oder Prozentwerte des Begrenzungsrahmens des Elements darstellen, auf das das Muster angewendet wird. Der Begrenzungsrahmen kann so betrachtet werden, als wäre der Inhalt von
<pattern>an eineviewBoxmit dem Wert"0 0 1 1"gebunden.
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>
Spezifikationen
| Spezifikation |
|---|
| Scalable Vector Graphics (SVG) 2 # PatternElementPatternUnitsAttribute |