SVGPathElement: getPathData()-Methode
Experimentell: Dies ist eine experimentelle Technologie
Überprüfen Sie die Browser-Kompatibilitätstabelle sorgfältig vor der Verwendung auf produktiven Webseiten.
Die SVGPathElement.getPathData()
-Methode gibt die Sequenz von Pfadsegmenten zurück, die den Pfaddaten entspricht und optional die Werte und Segmenttypen normalisiert.
Syntax
getPathData()
getPathData(options)
Parameter
options
Optional-
Ein optionales Objekt zur Steuerung von Aspekten des Datenabrufprozesses. Dieses Objekt kann die folgenden Eigenschaften enthalten:
normalize
Optional-
Ein boolescher Wert, der angibt, ob die zurückgegebene Sequenz von Pfadsegmenten in den Basissatz von absoluten Befehlen (
'M'
,'L'
,'C'
und'Z'
) umgewandelt wird, wobei die Werte entsprechend angepasst werden.
Rückgabewert
Ein Array von Pfadsegmenten, das den Pfaddaten entspricht. Wenn keine gültigen Pfaddaten existieren, wird eine leere Sequenz zurückgegeben.
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.
Beispiele
Pfaddaten abrufen
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>
Die getPathData()
-Methode gibt ein Array mit den rohen Pfaddaten zurück, wie sie im d
-Attribut festgelegt sind. Mit der Option normalize: true
werden die Pfaddaten zu dem Basissatz von Pfadbefehlen normalisiert:
const path = document.querySelector("path");
console.log(path.getPathData());
// Output: raw path data:
// [
// { type: "M", values: [0, 0] },
// { type: "h", values: [64] },
// { type: "v", values: [64] },
// { type: "h", values: [-64] },
// { type: "Z", values: [] }
// ]
console.log(path.getPathData({ normalize: true }));
// Output: normalized path data:
// [
// { type: "M", values: [0, 0] },
// { type: "L", values: [64, 0] },
// { type: "L", values: [64, 64] },
// { type: "L", values: [0, 64] },
// { type: "Z", values: [] }
// ]
Spezifikationen
Specification |
---|
SVG Paths # __svg__SVGPathData__getPathData |