SVGPathElement.setPathData() — Methode · JavaScript-Referenz

Signatur

SVGPathElement.prototype.setPathData(pathData)

Beschreibung

setPathData() ist das Gegenstück zu getPathData() aus der SVG Paths Data API. Statt einen Pfad als Zeichenkette wie "M 10 10 L 90 10 Z" zusammenzubauen, übergibst du ein Array von Segment-Objekten. Jedes Objekt hat einen Befehlsbuchstaben in type (z. B. "M", "L", "C", "Z") und die zugehörigen Zahlen im Array values. Der Browser setzt daraus das d-Attribut neu zusammen und stellt den Pfad neu dar.

Nützlich ist die Methode vor allem, wenn du Pfade programmatisch bearbeitest: Punkte verschieben, skalieren, morphen, Pfade aus Messdaten erzeugen (Diagramme) oder vorhandene Pfade mit getPathData({ normalize: true }) auslesen, verändern und zurückschreiben. So musst du keine Zeichenketten parsen und auch keine formatieren.

Groß- und Kleinschreibung haben dieselbe Bedeutung wie in der Pfadsyntax. Großbuchstaben stehen für absolute Koordinaten, Kleinbuchstaben für relative. Wie viele Zahlen values enthält, hängt vom Befehl ab: M/L → 2, H/V → 1, C → 6, S/Q → 4, T → 2, A → 7, Z → 0.

Parameter

Name	Typ	Default	Beschreibung
$pathData Pflicht	Array<{ type: string, values: number[] }>		Liste der Pfadsegmente. `type` ist ein SVG-Pfadbefehl (`M m L l H h V v C c S s Q q T t A a Z z`), `values` enthält die Zahlen für diesen Befehl. Ein leeres Array leert den Pfad.

Rückgabewert

Typ

undefined

Beschreibung

Kein Rückgabewert. Die Methode ändert das d-Attribut des Elements direkt.

Beispiele

Dreieck aus Segment-Objekten zeichnen

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

path.setPathData([
  { type: 'M', values: [10, 90] },
  { type: 'L', values: [50, 10] },
  { type: 'L', values: [90, 90] },
  { type: 'Z', values: [] }
]);

path.setAttribute('fill', 'tomato');
svg.append(path);
console.log(path.getAttribute('d'));

M 10 90 L 50 10 L 90 90 Z

Vorhandenen Pfad auslesen, skalieren und zurückschreiben

const path = document.querySelector('#logo-path');

// normalize: true liefert nur absolute M, L, C und Z
const segments = path.getPathData({ normalize: true });

const scale = 2;
const scaled = segments.map(({ type, values }) => ({
  type,
  values: values.map((v) => v * scale)
}));

path.setPathData(scaled);

Liniendiagramm aus Messwerten mit Fallback

const values = [12, 40, 25, 60, 45, 80];
const path = document.querySelector('#chart-line');

const segments = values.map((y, i) => ({
  type: i === 0 ? 'M' : 'L',
  values: [i * 20, 100 - y]
}));

if (typeof path.setPathData === 'function') {
  path.setPathData(segments);
} else {
  // Fallback: d-Attribut als Zeichenkette setzen
  const d = segments.map((s) => `${s.type} ${s.values.join(' ')}`).join(' ');
  path.setAttribute('d', d);
}

console.log(path.getAttribute('d'));

M 0 88 L 20 60 L 40 75 L 60 40 L 80 55 L 100 20

// Wichtig · Fallstricke

Browser-Unterstützung: Die SVG Paths Data API ist nicht Baseline. Firefox unterstützt sie ab Version 137, in Chromium-Browsern war sie lange nur hinter einem Flag verfügbar, und in Safari fehlt sie. Prüfe vor der Verwendung mit 'setPathData' in SVGPathElement.prototype, ob die Methode vorhanden ist. Andernfalls nimm einen Polyfill (z. B. path-data-polyfill) oder setze das Attribut direkt mit setAttribute('d', …).
Passt die Anzahl der Zahlen in values nicht zum Befehl oder ist type ungültig, gilt dieselbe Fehlerbehandlung wie beim Parsen von d. Der Pfad wird dann nur bis zum letzten gültigen Segment dargestellt, und es wird kein Fehler geworfen, der dich darauf hinweist.
Ein Pfad sollte mit M oder m beginnen. Sonst ist er ungültig und wird nicht gezeichnet.
Die erzeugte Zeichenkette in d ist normalisiert. Sie kann sich also in Formatierung und Leerzeichen von einem handgeschriebenen Attribut unterscheiden.
Bei Animationen, die jedes Bild neu berechnen, solltest du setPathData() innerhalb von requestAnimationFrame aufrufen und die Segment-Arrays möglichst wiederverwenden. So vermeidest du unnötige Speicherbereinigung.
Die veraltete SVGPathSeg-API (createSVGPathSegLinetoAbs() usw.) wurde aus den Browsern entfernt. setPathData() ist ihr vorgesehener Nachfolger.

Siehe auch

SVGPathElement.getPathData() SVGPathElement SVGPathElement.getPointAtLength() SVGPathElement.getTotalLength() Element.setAttribute() WindowClient.navigate()