Signatur
Beschreibung
Die Eigenschaft y2 des Interfaces SVGLineElement entspricht dem Attribut y2 eines <line>-Elements und gibt die y-Koordinate des Endpunkts der Linie an. Zurückgegeben wird kein Zahlenwert, sondern ein SVGAnimatedLength-Objekt.
Dieses Objekt hat zwei Eigenschaften: baseVal steht für den im Attribut gesetzten Grundwert und lässt sich beschreiben. animVal steht für den aktuell angezeigten Wert, also gegebenenfalls unter Einfluss einer SMIL-Animation wie <animate>, und kann nur gelesen werden. Beide sind vom Typ SVGLength und bieten unter anderem value (in Benutzereinheiten), valueInSpecifiedUnits, unitType und convertToSpecifiedUnits().
„Schreibgeschützt“ heißt hier nur, dass man die Eigenschaft y2 selbst nicht durch ein anderes Objekt ersetzen kann. Den Wert ändert man über line.y2.baseVal.value oder über setAttribute('y2', …). Die Eigenschaft ist nützlich für Diagramme, Verbindungslinien, Zeiger oder interaktive Zeichenwerkzeuge, bei denen Endpunkte per Skript berechnet oder ausgelesen werden.
Rückgabewert
baseVal (beschreibbar) und animVal (schreibgeschützt) jeweils ein SVGLength mit der y-Koordinate des Endpunkts enthalten. Fehlt das Attribut, ist der Wert 0.Beispiele
Endpunkt einer Linie auslesen
// HTML: <svg width="200" height="100"><line id="l" x1="10" y1="10" x2="190" y2="80" stroke="black"/></svg>
const line = document.getElementById('l');
console.log(line.y2.baseVal.value);
console.log(line.y2.baseVal.unitType === SVGLength.SVG_LENGTHTYPE_NUMBER);Linie per Skript erzeugen und Endpunkt setzen
const SVG_NS = 'http://www.w3.org/2000/svg';
const svg = document.querySelector('svg');
const line = document.createElementNS(SVG_NS, 'line');
line.setAttribute('stroke', 'tomato');
line.x1.baseVal.value = 0;
line.y1.baseVal.value = 0;
line.x2.baseVal.value = 150;
line.y2.baseVal.value = 60; // entspricht setAttribute('y2', '60')
svg.append(line);
console.log(line.getAttribute('y2'));Linie folgt dem Mauszeiger
const svg = document.querySelector('svg');
const line = svg.querySelector('line');
svg.addEventListener('pointermove', (event) => {
// Bildschirmkoordinaten in SVG-Benutzerkoordinaten umrechnen
const pt = new DOMPoint(event.clientX, event.clientY)
.matrixTransform(svg.getScreenCTM().inverse());
line.x2.baseVal.value = pt.x;
line.y2.baseVal.value = pt.y;
});Einheiten umrechnen und animVal lesen
// <line id="p" x1="0" y1="0" x2="100" y2="50%" stroke="blue"/>
const line = document.getElementById('p');
const len = line.y2.baseVal;
console.log(len.unitType === SVGLength.SVG_LENGTHTYPE_PERCENTAGE); // true
console.log(len.valueInSpecifiedUnits); // 50
len.convertToSpecifiedUnits(SVGLength.SVG_LENGTHTYPE_PX);
console.log(line.getAttribute('y2')); // z. B. "50px" bei 100px Höhe
console.log(line.y2.animVal.value); // aktuell angezeigter Wert// Wichtig · Fallstricke
- Kein Zahlenwert:
line.y2liefert ein Objekt. Eine Zuweisung wieline.y2 = 50bleibt wirkungslos, im Strict Mode wirft sie einenTypeError. Richtig istline.y2.baseVal.value = 50. animValkann nur gelesen werden: Wer darauf schreibt, löst einen Fehler aus. Während einer SMIL-Animation könnenbaseValundanimValunterschiedliche Werte haben.- Prozentwerte beziehen sich auf die Höhe des Viewports.
valuegibt dann den umgerechneten Wert in Benutzereinheiten zurück. Ob das klappt, hängt vom Layout ab: Bei Elementen, die nicht im Dokument eingehängt sind, kann das Ergebnis0sein. - CSS-Eigenschaft: In SVG 2 ist
y2keine geometrische CSS-Eigenschaft wiecxbei Kreisen. Man kann sie also nicht per Stylesheet setzen, sondern nur über das Attribut oder das DOM. - Namespace: Dynamisch erzeugte Linien müssen mit
document.createElementNS('http://www.w3.org/2000/svg', 'line')angelegt werden. Nur dann entsteht ein echtesSVGLineElementmit der Eigenschafty2. - Die Eigenschaft wird von allen modernen Browsern unterstützt, in Node.js jedoch nur mit DOM-Implementierungen wie jsdom, und dort auch nur eingeschränkt.