Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten. Erfahre mehr über dieses Experiment.
SVGPatternElement: width-Eigenschaft
Baseline
Weitgehend verfügbar
Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Juli 2015 browserübergreifend verfügbar.
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:
<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:
const patterns = document.querySelectorAll("pattern");
console.log(patterns[0].width.baseVal.value); // output: 20
console.log(patterns[1].width.baseVal.value); // output: 40
Spezifikationen
| Spezifikation |
|---|
| Scalable Vector Graphics (SVG) 2 # __svg__SVGPatternElement__width |
Browser-Kompatibilität
JavaScript aktivieren, um diese Browser-Kompatibilitätstabelle anzuzeigen.