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 Geometrieeigenschaften 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 unten beschriebenen SVG-Elementen verwendet werden.
<pattern>
Für <pattern>
definiert patternUnits
das verwendete Koordinatensystem für die Geometrieeigenschaften (x
, y
, width
und height
) des Elements.
Wert | userSpaceOnUse | objectBoundingBox |
---|---|
Standardwert | objectBoundingBox |
Animierbar | Ja |
userSpaceOnUse
-
Dieser Wert gibt an, dass sich alle Koordinaten für die Geometrieeigenschaften auf das Benutzerkoordinatensystem beziehen, das definiert ist, wenn das Muster angewendet wird.
objectBoundingBox
-
Dieser Wert gibt an, dass alle Koordinaten für die Geometrieeigenschaften Brüche oder Prozentsätze der Begrenzungsbox des Elements darstellen, auf das das Muster angewendet wird. Eine Begrenzungsbox könnte als identisch mit der Betrachtung des Inhalts des
<pattern>
-Elements in einem"0 0 1 1"
viewBox
betrachtet werden.
Spezifikationen
Specification |
---|
Scalable Vector Graphics (SVG) 2 # PatternElementPatternUnitsAttribute |
Browser-Kompatibilität
BCD tables only load in the browser