SVGPatternElement: width-Eigenschaft
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.
Die width-Schreibgeschützte Eigenschaft der SVGPatternElement-Schnittstelle beschreibt die Breite des Musters als ein SVGAnimatedLength. Sie spiegelt den berechneten Wert des width-Attributs auf dem <pattern>-Element wider.
Der Attributwert kann ein \<length>, \<percentage>, oder \<number> sein. Der numerische Wert des SVGAnimatedLength.baseVal repräsentiert die Breite des Musters im Benutzerkoordinatensystem.
Wert
Ein SVGAnimatedLength.
Beispiel
Im folgenden SVG:
html
<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
<defs>
<!-- First pattern -->
<pattern
id="pattern1"
x="50"
height="20"
width="20"
patternUnits="userSpaceOnUse">
<circle cx="10" cy="10" r="10" fill="blue" />
</pattern>
<!-- Second pattern -->
<pattern
id="pattern2"
x="100"
height="40"
width="40"
patternUnits="userSpaceOnUse">
<circle cx="20" cy="20" r="10" fill="red" />
</pattern>
</defs>
<!-- Using the patterns -->
<rect x="0" y="0" width="100" height="100" fill="url(#pattern1)" />
<rect x="100" y="0" width="100" height="100" fill="url(#pattern2)" />
</svg>
Können wir auf die berechneten Werte der x-Attribute zugreifen:
js
const patterns = document.querySelectorAll("pattern");
console.log(patterns[0].width.baseVal.value); // output: 20
console.log(patterns[1].width.baseVal.value); // output: 40
Spezifikationen
| Specification |
|---|
| Scalable Vector Graphics (SVG) 2 # __svg__SVGPatternElement__width |