SVGLineElement.x1 — Eigenschaft · JavaScript-Referenz

Signatur

get SVGLineElement.x1

Beschreibung

Die Eigenschaft x1 des SVGLineElement steht für das Attribut x1 eines <line>-Elements, also die horizontale Koordinate des Startpunkts der Linie. Sie gibt keine einfache Zahl zurück, sondern ein SVGAnimatedLength-Objekt mit den Untereigenschaften baseVal (der im Attribut gesetzte Grundwert) und animVal (der aktuelle, ggf. durch SMIL-Animation veränderte Wert).

Die Eigenschaft selbst ist schreibgeschützt: Du kannst line.x1 kein neues Objekt zuweisen. Den Wert änderst du aber über line.x1.baseVal.value (in Benutzereinheiten), über baseVal.valueAsString, über baseVal.newValueSpecifiedUnits() oder einfach mit setAttribute('x1', …).

Praktisch ist x1 immer dann, wenn du Linien per JavaScript auslesen oder dynamisch verändern willst, etwa für Diagramme, Verbindungslinien zwischen Knoten, Messwerkzeuge oder interaktive Zeichnungen. Zusammen mit y1, x2 und y2 legt x1 die Geometrie der Linie vollständig fest.

Rückgabewert

Typ

SVGAnimatedLength

Beschreibung

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

Beispiele

Startkoordinate auslesen

// HTML: <svg width="200" height="100"><line id="l" x1="10" y1="20" x2="190" y2="80" stroke="black"/></svg>
const line = document.getElementById('l');

console.log(line.x1.baseVal.value);          // Zahl in Benutzereinheiten
console.log(line.x1.baseVal.valueAsString);  // Text wie im Attribut
console.log(line.x1.animVal.value);          // aktueller (animierter) Wert

10 "10" 10

Linie dynamisch erzeugen und Startpunkt setzen

const SVG_NS = 'http://www.w3.org/2000/svg';
const svg = document.querySelector('svg');
const line = document.createElementNS(SVG_NS, 'line');

line.x1.baseVal.value = 30;   // entspricht x1="30"
line.y1.baseVal.value = 50;
line.x2.baseVal.value = 170;
line.y2.baseVal.value = 50;
line.setAttribute('stroke', 'tomato');
svg.append(line);

console.log(line.getAttribute('x1'));

"30"

Startpunkt der Mausposition folgen lassen

const svg = document.querySelector('svg');
const line = svg.querySelector('line');

svg.addEventListener('pointermove', (event) => {
  // Bildschirmkoordinaten in SVG-Koordinaten umrechnen
  const pt = new DOMPoint(event.clientX, event.clientY)
    .matrixTransform(svg.getScreenCTM().inverse());
  line.x1.baseVal.value = pt.x;
  line.y1.baseVal.value = pt.y;
});

Einheiten und Prozentwerte

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

// Wert in Prozent setzen (bezogen auf die Viewport-Breite)
line.x1.baseVal.newValueSpecifiedUnits(SVGLength.SVG_LENGTHTYPE_PERCENTAGE, 25);
console.log(line.getAttribute('x1'));

// Umrechnen in Benutzereinheiten (px)
line.x1.baseVal.convertToSpecifiedUnits(SVGLength.SVG_LENGTHTYPE_NUMBER);
console.log(line.x1.baseVal.valueAsString);

"25%" "50" // bei 200px breitem SVG

// Wichtig · Fallstricke

Schreibgeschützt: line.x1 = 50 hat keine Wirkung (im Strict Mode TypeError). Ändere stattdessen line.x1.baseVal.value oder das Attribut.
animVal ist ebenfalls schreibgeschützt; Zuweisungen an animVal.value werfen einen Fehler.
Prozentwerte beziehen sich auf die Breite des nächsten SVG-Viewports. Beim Lesen von baseVal.value wird dieser in Benutzereinheiten umgerechnet – bei nicht gerendertem oder nicht eingehängtem SVG kann das Ergebnis 0 oder ungenau sein.
SVG-Elemente müssen mit document.createElementNS('http://www.w3.org/2000/svg', 'line') erzeugt werden; document.createElement('line') liefert kein SVGLineElement und damit keine x1-Eigenschaft.
In SVG 2 kann x1 nicht per CSS gesetzt werden (anders als z. B. cx bei Kreisen); nutze Attribut oder DOM.
Kompatibilität: in allen modernen Browsern seit langem unterstützt.

Siehe auch

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