SVGLineElement.x2 — Eigenschaft · JavaScript-Referenz

Signatur

SVGLineElement.x2

Beschreibung

Die Eigenschaft x2 des SVGLineElement steht für das SVG-Attribut x2 eines <line>-Elements, also die x-Koordinate des Endpunkts der Linie. Zurückgegeben wird kein Zahlenwert, sondern ein SVGAnimatedLength-Objekt mit zwei Unterobjekten vom Typ SVGLength: baseVal (der im Attribut festgelegte Grundwert) und animVal (der aktuelle, ggf. durch SMIL-Animation veränderte Wert).

„Schreibgeschützt“ heißt nur, dass Sie der Eigenschaft x2 selbst kein neues Objekt zuweisen können. Den Wert ändern Sie über line.x2.baseVal.value (in Benutzereinheiten), über baseVal.valueAsString (z. B. "50%"), über newValueSpecifiedUnits() oder ganz klassisch mit setAttribute("x2", …). Alle Wege halten Attribut und DOM-Objekt synchron.

Nützlich ist x2 vor allem für dynamische Grafiken: Diagramme, Verbindungslinien zwischen Knoten, Zeiger, Linien, die der Maus folgen, oder Messwerkzeuge. Da baseVal.value immer in Benutzereinheiten zurückgegeben wird, auch wenn das Attribut in Prozent oder em angegeben ist, eignet es sich gut für Berechnungen wie Linienlänge oder Winkel.

Rückgabewert

Typ

SVGAnimatedLength

Beschreibung

Ein Objekt mit baseVal und animVal (beide SVGLength), das die x-Koordinate des Linienendpunkts beschreibt. Fehlt das Attribut, ist der Wert 0.

Beispiele

Endpunkt auslesen

const svgNS = "http://www.w3.org/2000/svg";
const line = document.createElementNS(svgNS, "line");
line.setAttribute("x1", "10");
line.setAttribute("y1", "10");
line.setAttribute("x2", "150");
line.setAttribute("y2", "80");

console.log(line.x2 instanceof SVGAnimatedLength);
console.log(line.x2.baseVal.value);
console.log(line.x2.animVal.value);

true 150 150

Linie folgt dem Mauszeiger

// HTML: <svg id="canvas" width="400" height="300"><line id="zeiger" x1="200" y1="150" x2="200" y2="150" stroke="black"/></svg>
const svg = document.getElementById("canvas");
const line = document.getElementById("zeiger");

svg.addEventListener("pointermove", (event) => {
  // Bildschirmkoordinaten in SVG-Koordinaten 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;
});

Linienlänge berechnen und Einheiten setzen

const line = document.querySelector("line");

const länge = () => Math.hypot(
  line.x2.baseVal.value - line.x1.baseVal.value,
  line.y2.baseVal.value - line.y1.baseVal.value
);

console.log(`Länge: ${länge().toFixed(1)}`);

// Endpunkt relativ zur Viewport-Breite setzen
line.x2.baseVal.valueAsString = "75%";
console.log(line.getAttribute("x2"));
console.log(line.x2.baseVal.unitType === SVGLength.SVG_LENGTHTYPE_PERCENTAGE);

Länge: 158.1 75% true

// Wichtig · Fallstricke

Keine direkte Zuweisung: line.x2 = 100 bewirkt nichts (im Strict Mode TypeError). Richtig ist line.x2.baseVal.value = 100.
animVal ist schreibgeschützt; Änderungen gehören immer an baseVal.
Bei Prozentwerten hängt baseVal.value vom Viewport des nächsten <svg> ab – bei einem nicht eingehängten Element kann der Wert 0 oder ungenau sein.
SVG-Elemente müssen mit document.createElementNS("http://www.w3.org/2000/svg", "line") erzeugt werden; createElement("line") liefert kein SVGLineElement und damit keine x2-Eigenschaft.
x2 kann in SVG 2 auch per CSS nicht gesetzt werden (anders als bei <rect>-Geometrie-Eigenschaften); Transformationen (transform) verändern den Attributwert nicht.
Kompatibilität: in allen modernen Browsern seit Langem unterstützt.

Siehe auch

SVGLineElement SVGLineElement.x1 SVGLineElement.y1 SVGLineElement.y2 SVGAnimatedLength SVGLength HTMLTitleElement.text