SVGPathElement: setPathData() Methode

We’d love to hear your thoughts on the next set of proposals for the JavaScript language. You can find a description of the proposals here.
Please take two minutes to fill out our short survey.

Experimentell: Dies ist eine experimentelle Technologie
Überprüfen Sie die Browser-Kompatibilitätstabelle sorgfältig vor der Verwendung auf produktiven Webseiten.

Die SVGPathElement.setPathData() Methode setzt die Sequenz von Pfadsegmenten als neue Pfaddaten.

Syntax

js
setPathData(pathData)

Parameter

pathData

Ein Array von Pfadsegmenten. Jedes Pfadsegment ist ein Objekt mit den folgenden Eigenschaften:

type

Ein Pfadbefehl. Wenn options.normalize wahr ist, wird dies einer der absoluten Befehle sein: 'M', 'L', 'C' und 'Z'.

values

Ein Array oder Wert, der die Parameter für den entsprechenden Befehl enthält.

Rückgabewert

Keiner (undefined).

Beispiel

Pfaddaten setzen

Betrachten Sie das folgende <path> Element, das ein Quadrat zeichnet:

xml
<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64">
  <path d="M0,0 h64 v64 h-64 z" />
</svg>

Der unten stehende Code verwendet die getPathData() Methode, um die normalisierten Pfaddaten als absolute Befehle zurückzugeben. Das Zurücksetzen der zurückgegebenen Daten auf das <path> Element mit der setPathData() Methode führt zu einem anderen Satz von Pfadbefehl im DOM:

js
const svgPath = document.querySelector("path");
const pathData = path.getPathData({ normalize: true });

svgPath.setPathData(pathData);

// <path d="M 0 0 L 64 0 L 64 64 L 0 64 Z" />

Spezifikationen

Specification
SVG Paths
# __svg__SVGPathData__setPathData

Browser-Kompatibilität