SVGPathElement: setPathData() Methode

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.

Keiner (undefined).

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

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

Der untenstehende Code verwendet die Methode getPathData(), 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 einer anderen Reihe von Pfadbefehlen im DOM:

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" />