SVGLineElement.y1 — Eigenschaft · JavaScript-Referenz

Signatur

SVGLineElement.y1

Beschreibung

Die Eigenschaft y1 des Interfaces SVGLineElement entspricht dem Attribut y1 eines <line>-Elements. Sie gibt die y-Koordinate des Startpunkts der Linie im aktuellen Benutzerkoordinatensystem an. Fehlt das Attribut, gilt der Wert 0.

Die Eigenschaft selbst ist schreibgeschützt. Sie liefert aber ein SVGAnimatedLength-Objekt, und über dessen Eigenschaft baseVal (ein SVGLength) lässt sich der Wert trotzdem lesen und ändern, z. B. mit baseVal.value, baseVal.valueAsString oder baseVal.newValueSpecifiedUnits(). animVal enthält den aktuellen, möglicherweise per SMIL animierten Wert und kann nur gelesen werden.

Gebraucht wird y1 vor allem, wenn Linien per Skript berechnet oder verändert werden, etwa bei Diagrammen, Verbindungslinien zwischen Knoten oder interaktiven Zeichenwerkzeugen. Anders als bei getAttribute('y1') bekommt man hier direkt einen numerischen Wert in Benutzereinheiten, Einheiten wie % oder em sind dabei schon umgerechnet.

Rückgabewert

Typ

SVGAnimatedLength

Beschreibung

Ein Objekt mit baseVal (änderbarer Grundwert als SVGLength) und animVal (schreibgeschützter, aktuell animierter Wert).

Beispiele

Startpunkt einer Linie auslesen

// <svg><line id="l" x1="10" y1="20" x2="100" y2="80" stroke="black"/></svg>
const line = document.querySelector('#l');
console.log(line.y1.baseVal.value);
console.log(line.y1.baseVal.valueAsString);

20 20

Linie per Skript verschieben

const line = document.querySelector('#l');
// Startpunkt um 30 Einheiten nach unten verschieben
line.y1.baseVal.value += 30;
console.log(line.getAttribute('y1'));

50

Linie dynamisch erzeugen und Wert in Prozent setzen

const NS = 'http://www.w3.org/2000/svg';
const svg = document.createElementNS(NS, 'svg');
svg.setAttribute('width', '200');
svg.setAttribute('height', '200');
const line = document.createElementNS(NS, 'line');
line.setAttribute('x2', '200');
line.setAttribute('y2', '200');
line.setAttribute('stroke', 'red');
svg.append(line);
document.body.append(svg);

// y1 auf 50 % der Viewport-Höhe setzen
line.y1.baseVal.newValueSpecifiedUnits(SVGLength.SVG_LENGTHTYPE_PERCENTAGE, 50);
console.log(line.getAttribute('y1'));
console.log(line.y1.baseVal.value);

50% 100

Verbindungslinie der Mausposition folgen lassen

const svg = document.querySelector('svg');
const line = svg.querySelector('line');
svg.addEventListener('pointermove', (e) => {
  const pt = new DOMPoint(e.clientX, e.clientY)
    .matrixTransform(svg.getScreenCTM().inverse());
  line.x1.baseVal.value = pt.x;
  line.y1.baseVal.value = pt.y;
});

// Wichtig · Fallstricke

Nicht direkt zuweisen: line.y1 = 50 hat keine Wirkung, im Strict Mode wirft es einen TypeError. Ändern Sie den Wert immer über line.y1.baseVal.value oder mit setAttribute('y1', …).
Prozentangaben beziehen sich auf die Höhe des Viewports. baseVal.value lässt sich nur korrekt umrechnen, wenn das Element im Dokument eingehängt und gerendert ist. Bei losgelösten Elementen kann das Ergebnis 0 sein oder einen Fehler auslösen.
Seit SVG 2 ist y1 auch eine Geometrie-Eigenschaft, die sich per CSS setzen lässt. Ein CSS-Wert überschreibt das Attribut in der Darstellung, baseVal zeigt aber weiterhin den Attributwert.
animVal ist nur bei SMIL-Animationen (<animate>) anders als baseVal. CSS-Animationen oder Transitionen wirken sich darauf nicht aus.
Die Eigenschaft wird in allen modernen Browsern unterstützt, auch in Chrome, Firefox, Safari und Edge.

Siehe auch

SVGLineElement SVGLineElement.x1 SVGLineElement.x2 SVGLineElement.y2 SVGAnimatedLength SVGLength HTMLStyleElement.type