SVGLineElement: y1-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 y1 schreibgeschützte Eigenschaft des SVGLineElement-Interfaces beschreibt den Startpunkt der SVG-Linie entlang der y-Achse als SVGAnimatedLength. Sie spiegelt das <line>-Element-Attribut y1 wider.
Der Attributwert ist ein \<length>, <percentage> oder <number>. Der numerische Wert des SVGAnimatedLength.baseVal ist diese Startposition als Länge entlang der y-Achse in Benutzereinheiten des Koordinatensystems.
Wert
Eine SVGAnimatedLength.
Beispiel
Für 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="5%" x2="30%" y2="60%" stroke="red" stroke-width="4" />
</svg>
können wir auf die berechneten Werte der y1-Attribute zugreifen:
js
const lines = document.querySelectorAll("line");
const y1Pos0 = lines[0].y1;
const y1Pos1 = lines[1].y1;
console.dir(y1Pos0.baseVal.value); // output: 30 (the value of `y1`)
console.dir(y1Pos1.baseVal.value); // output: 10 (5% of 200)
Spezifikationen
| Specification |
|---|
| Scalable Vector Graphics (SVG) 2 # __svg__SVGLineElement__y1 |