SVGPathElement: getPathData() 方法
SVGPathElement.getPathData() 方法会返回与路径数据对应的路径段序列，可以选择性地对值和段类型进行规范化。
语法
js
getPathData()
getPathData(options)
参数
options可选-
一个可选对象，用于控制路径数据检索过程的方面。此对象可能包含以下属性：
normalize可选-
一个布尔值，指示返回的路径段序列是否转换为一组基本的 绝对命令（
'M'、'L'、'C'和'Z'），并相应地调整值。
返回值
与路径数据对应的路径段数组。如果没有有效的路径数据，则返回一个空序列。
每个路径段都是一个具有以下属性的对象：
type-
一个 路径命令。如果
options.normalize为 true，则此命令将是绝对命令之一：'M'、'L'、'C'和'Z'。 值-
包含相应命令参数的数组或值。
示例
获取路径数据
考虑以下绘制正方形的 <path> 元素：
xml
<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64">
<path d="M0,0 h64 v64 h-64 z" />
</svg>
getPathData() 方法将返回一个数组，其中包含与 d 属性中设置的原始路径数据相同的数据。如果设置了 normalize: true 选项，它将返回已规范化为一组基本路径命令的路径数据。
js
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: [] }
// ]
规范
| 规范 |
|---|
| SVG 路径 # __svg__SVGPathData__getPathData |
浏览器兼容性
加载中…