SVGUseElement: 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 schreibgeschützte width
-Eigenschaft der SVGUseElement
-Schnittstelle beschreibt die Breite des referenzierten Elements als ein SVGAnimatedLength
. Sie spiegelt den berechneten Wert des width
-Attributs auf dem <use>
-Element wider.
Der Attributwert ist ein \<length>
, \<percentage>
oder \<number>
. Der numerische Wert des SVGAnimatedLength.baseVal
ist die Breite des referenzierten Elements im Benutzerkoordinatensystem.
Wert
Ein SVGAnimatedLength
.
Beispiele
Angenommen, das folgende SVG:
<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
<defs>
<circle id="circle1" cx="50" cy="50" r="40" fill="blue" />
<circle id="circle2" cx="50" cy="50" r="40" fill="red" />
</defs>
<use x="50%" y="50%" href="#circle1" width="50" />
<use x="25%" y="50%" href="#circle2" width="100" />
</svg>
Wir können auf die berechneten Werte der width
-Attribute zugreifen:
const uses = document.querySelectorAll("use");
const widthUse1 = uses[0].width;
const widthUse2 = uses[1].width;
console.log(widthUse1.baseVal.value); // output: 50
console.log(widthUse2.baseVal.value); // output: 100
Spezifikationen
Specification |
---|
Scalable Vector Graphics (SVG) 2 # __svg__SVGUseElement__width |
Browser-Kompatibilität
BCD tables only load in the browser