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
optionsOptional-
Ein optionales Objekt zur Steuerung von Aspekten des Datenabrufprozesses. Dieses Objekt kann die folgenden Eigenschaften enthalten:
normalizeOptional-
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.normalizewahr 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> |
Browser-Kompatibilität
Loading…