SVGLineElement: x1-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 x1 schreibgeschützte Eigenschaft der SVGLineElement-Schnittstelle beschreibt den Start der SVG-Linie entlang der x-Achse als ein SVGAnimatedLength. Sie spiegelt das geometrische Attribut x1 des <line>-Elements wider.
Der Attributwert ist ein \<length>, \<percentage> oder \<number>. Der numerische Wert des SVGAnimatedLength.baseVal ist diese Startposition als Länge entlang der x-Achse in Benutzersystemkoordinateneinheiten.
Wert
Ein SVGAnimatedLength.
Beispiel
Gegeben das folgende SVG:
html
<svg viewBox="0 0 300 200" xmlns="http://www.w3.org/2000/svg">
<line x1="20" y1="30" x2="40" y2="50" stroke="blue" stroke-width="2" />
<line x1="15%" y1="0" x2="30%" y2="60" stroke="red" stroke-width="4" />
</svg>
Wir können auf die berechneten Werte der x1-Attribute zugreifen:
js
const lines = document.querySelectorAll("line");
const x1Pos0 = lines[0].x1;
const x1Pos1 = lines[1].x1;
console.dir(x1Pos0.baseVal.value); // output: 20 (the value of `x1`)
console.dir(x1Pos1.baseVal.value); // output: 45 (15% of 300)
Spezifikationen
| Specification |
|---|
| Scalable Vector Graphics (SVG) 2 # __svg__SVGLineElement__x1 |