SVGLineElement — Schnittstelle · JavaScript-Referenz

Signatur

interface SVGLineElement extends SVGGeometryElement

Beschreibung

Die Schnittstelle SVGLineElement steht für ein <line>-Element in einem SVG-Dokument, also eine gerade Strecke zwischen zwei Punkten. Sie erbt von SVGGeometryElement und damit auch von SVGGraphicsElement, SVGElement, Element und EventTarget. Deshalb stehen Methoden wie getTotalLength(), getPointAtLength(), isPointInStroke() und getBBox() direkt zur Verfügung.

Eigene Eigenschaften sind die vier schreibgeschützten Attribute x1, y1, x2 und y2. Jedes davon ist ein SVGAnimatedLength-Objekt. Den aktuellen Zahlenwert lesen und setzen Sie über .baseVal.value. Über .animVal erhalten Sie den Wert, der gerade animiert wird, etwa durch SMIL.

Typische Einsatzfälle sind dynamisch gezeichnete Diagramme (Achsen, Gitterlinien, Verbindungslinien zwischen Knoten), Zeichenwerkzeuge und Animationen, bei denen Endpunkte zur Laufzeit wandern. Ein SVGLineElement legen Sie mit document.createElementNS("http://www.w3.org/2000/svg", "line") an. Ein Konstruktor wie new SVGLineElement() existiert nicht.

Wichtig: Eine Linie hat keine Füllfläche. Ohne stroke-Angabe (Attribut oder CSS) ist sie deshalb unsichtbar.

Parameter

Name	Typ	Beschreibung
$x1	SVGAnimatedLength	Nur lesbar. x-Koordinate des Startpunkts (Attribut `x1`).
$y1	SVGAnimatedLength	Nur lesbar. y-Koordinate des Startpunkts (Attribut `y1`).
$x2	SVGAnimatedLength	Nur lesbar. x-Koordinate des Endpunkts (Attribut `x2`).
$y2	SVGAnimatedLength	Nur lesbar. y-Koordinate des Endpunkts (Attribut `y2`).

Rückgabewert

Typ

SVGLineElement

Beschreibung

Ein DOM-Objekt, das ein <line>-Element darstellt. Sie erhalten es über createElementNS() oder über DOM-Abfragen wie querySelector().

Beispiele

Linie per JavaScript erzeugen und einfügen

const SVG_NS = "http://www.w3.org/2000/svg";
const svg = document.createElementNS(SVG_NS, "svg");
svg.setAttribute("width", "200");
svg.setAttribute("height", "100");

const line = document.createElementNS(SVG_NS, "line");
line.setAttribute("x1", "10");
line.setAttribute("y1", "90");
line.setAttribute("x2", "190");
line.setAttribute("y2", "10");
line.setAttribute("stroke", "steelblue");
line.setAttribute("stroke-width", "3");

svg.append(line);
document.body.append(svg);

console.log(line instanceof SVGLineElement);

true

Koordinaten über SVGAnimatedLength lesen und ändern

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

// Aktuellen Wert lesen
console.log(line.x2.baseVal.value);

// Endpunkt verschieben, ohne setAttribute
line.x2.baseVal.value = 150;
line.y2.baseVal.value = 50;

console.log(line.getAttribute("x2"));

190 150

Länge messen und Mittelpunkt bestimmen

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

const length = line.getTotalLength();
const mid = line.getPointAtLength(length / 2);

console.log(`Länge: ${length.toFixed(1)}`);
console.log(`Mitte: ${mid.x}, ${mid.y}`);

Länge: 100.0 Mitte: 50, 50

Linie folgt dem Mauszeiger

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.x2.baseVal.value = pt.x;
  line.y2.baseVal.value = pt.y;
});

// Wichtig · Fallstricke

Namensraum: document.createElement(\"line\") erzeugt ein wirkungsloses HTMLUnknownElement. Verwenden Sie immer createElementNS(\"http://www.w3.org/2000/svg\", \"line\").
Unsichtbare Linie: Ohne stroke wird nichts gezeichnet, denn fill hat bei Linien keine Wirkung.
Nur lesbare Eigenschaften: line.x1 = 10 hat keine Wirkung, weil x1 selbst nur lesbar ist. Ändern Sie stattdessen line.x1.baseVal.value oder nutzen Sie setAttribute().
Einheiten: baseVal.value gibt den Wert immer in Benutzereinheiten (px) zurück. Bei Prozentangaben wird er relativ zum Viewport umgerechnet. Mit baseVal.valueAsString erhalten Sie den Originalwert als Zeichenkette, etwa \"50%\".
getBBox(): Bei rein horizontalen oder vertikalen Linien hat die Begrenzungsbox die Breite bzw. Höhe 0. Die Strichstärke wird dabei nicht berücksichtigt.
Kompatibilität: Wird von allen modernen Browsern unterstützt. Die geerbten Methoden von SVGGeometryElement, etwa isPointInStroke(), fehlen in sehr alten Browsern wie dem Internet Explorer.

Siehe auch

SVGTitleElement SVGUseElement SVGViewElement SVGAElement SVGCircleElement