SVGPolylineElement — Schnittstelle · JavaScript-Referenz

Signatur

interface SVGPolylineElement extends SVGGeometryElement

Beschreibung

SVGPolylineElement ist die DOM-Schnittstelle für das SVG-Element <polyline>. Eine Polyline ist ein offener Linienzug aus geraden Segmenten, die nacheinander eine Reihe von Punkten verbinden. Anders als bei <polygon> wird der letzte Punkt nicht automatisch mit dem ersten verbunden. Typische Einsatzgebiete sind Liniendiagramme, Sparklines, Messkurven, Routen oder Freihandzeichnungen.

Die Schnittstelle erbt von SVGGeometryElement und damit auch von SVGGraphicsElement, SVGElement, Element und EventTarget. Eigene Eigenschaften sind:

points (nur lesbar): eine SVGPointList mit den Basiswerten des points-Attributs. Die Liste ist live – Änderungen an ihr wirken sich direkt auf das Attribut und die Darstellung aus.
animatedPoints (nur lesbar): eine SVGPointList mit den aktuell animierten Werten (z. B. durch SMIL-<animate>). Ohne Animation entspricht sie points.

Über SVGGeometryElement stehen zusätzlich nützliche Geometrie-Methoden bereit: getTotalLength() liefert die Gesamtlänge des Linienzugs, getPointAtLength(distanz) einen Punkt auf der Linie, isPointInStroke(punkt) und isPointInFill(punkt) prüfen Trefferbereiche. Damit lassen sich etwa „Zeichen“-Animationen per stroke-dasharray oder Marker entlang einer Route realisieren.

Es gibt keinen öffentlichen Konstruktor. Neue Elemente erzeugt man mit document.createElementNS("http://www.w3.org/2000/svg", "polyline"); die Punkte setzt man entweder bequem als String über setAttribute("points", "x1,y1 x2,y2 …") oder gezielt über die SVGPointList-Methoden wie appendItem().

Rückgabewert

Typ

SVGPolylineElement

Beschreibung

Instanzen erhält man über document.createElementNS() mit dem SVG-Namensraum oder durch Abfrage vorhandener <polyline>-Elemente, z. B. mit querySelector().

Beispiele

Polyline erzeugen und als Liniendiagramm einfügen

const SVG_NS = "http://www.w3.org/2000/svg";

const svg = document.createElementNS(SVG_NS, "svg");
svg.setAttribute("viewBox", "0 0 200 100");
svg.setAttribute("width", "400");

const werte = [20, 45, 30, 80, 60, 90];
const schritt = 200 / (werte.length - 1);

const linie = document.createElementNS(SVG_NS, "polyline");
linie.setAttribute(
  "points",
  werte.map((w, i) => `${i * schritt},${100 - w}`).join(" ")
);
linie.setAttribute("fill", "none");
linie.setAttribute("stroke", "steelblue");
linie.setAttribute("stroke-width", "2");

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

console.log(linie instanceof SVGPolylineElement);
console.log(linie.points.numberOfItems);

true 6

Punkte über die SVGPointList lesen und live ergänzen

// <svg id="chart"><polyline id="kurve" points="0,50 50,20 100,60" /></svg>
const svg = document.querySelector("#chart");
const kurve = document.querySelector("#kurve");

// Vorhandene Punkte auslesen
for (let i = 0; i < kurve.points.numberOfItems; i++) {
  const p = kurve.points.getItem(i);
  console.log(`Punkt ${i}: (${p.x}, ${p.y})`);
}

// Neuen Punkt anhängen – Attribut wird automatisch aktualisiert
const neu = svg.createSVGPoint();
neu.x = 150;
neu.y = 30;
kurve.points.appendItem(neu);

console.log(kurve.getAttribute("points"));

Punkt 0: (0, 50) Punkt 1: (50, 20) Punkt 2: (100, 60) 0,50 50,20 100,60 150,30

Linie „zeichnen“ lassen mit getTotalLength()

const route = document.querySelector("polyline.route");
const laenge = route.getTotalLength();

// Strich zunächst komplett ausblenden
route.style.strokeDasharray = laenge;
route.style.strokeDashoffset = laenge;

// Per Web Animations API einblenden
route.animate(
  [{ strokeDashoffset: laenge }, { strokeDashoffset: 0 }],
  { duration: 1500, easing: "ease-out", fill: "forwards" }
);

// Mittelpunkt der Route ermitteln, z. B. für ein Label
const mitte = route.getPointAtLength(laenge / 2);
console.log(`Mitte bei x=${mitte.x.toFixed(1)}, y=${mitte.y.toFixed(1)}`);

// Wichtig · Fallstricke

Namensraum beachten: document.createElement("polyline") erzeugt ein wirkungsloses HTMLUnknownElement. Immer createElementNS("http://www.w3.org/2000/svg", "polyline") verwenden.
Standardfüllung: Polylines werden per Voreinstellung schwarz gefüllt (fill: black), auch wenn sie offen sind. Für reine Linien fill="none" und einen stroke setzen.
Ungültige Punktlisten: Bei einer ungeraden Anzahl an Koordinaten oder Syntaxfehlern rendern Browser nur bis zum letzten gültigen Punktpaar.
SVGPoint vs. DOMPoint: appendItem() erwartet ein SVGPoint. svg.createSVGPoint() funktioniert in allen Browsern; in SVG 2 ist SVGPoint ein Alias von DOMPoint, doch nicht jeder Browser akzeptiert new DOMPoint() hier.
Performance: Bei vielen Punkten (z. B. Echtzeit-Messdaten) ist es meist schneller, den kompletten points-String einmalig per setAttribute() zu setzen, statt viele einzelne appendItem()-Aufrufe abzusetzen.
Kompatibilität: Die Schnittstelle wird von allen modernen Browsern unterstützt; animatedPoints ist nur bei SMIL-Animationen relevant.

Siehe auch

SVGPolygonElement SVGLineElement SVGEllipseElement SVGStyleElement SVGCircleElement