使用Javascript获取SVG路径的绝对坐标

Question

我正在创建一个程序，可以将SVG文件转换为我的自定义格式。我已经创建了一个基于Web的应用程序来完成这项任务。我使用Web浏览器的默认DOM解析功能遍历SVG内容。

使用Javascript，我可以使用以下代码获取SVG路径元素：

var path = document.getElementById("path3388");

我可以使用以下代码获取路径段：

var pathSegments = path.pathSegList

然而这些路径段是相对于定义的父级SVG元素的，变换不包括在路径段列表中。

有没有一种方法可以获得此路径的绝对坐标，就像在屏幕上绘制时最终使用的那样？

例如：假设我有以下SVG代码片段：

<g transform="translate(100, 100)">
    <g transform="translate(50, 50)">
        <path d="M 0,0 10,0 10,10"></path>
    </g>
</g>

我想要恢复的是应用于两个 g 元素的变换后路径的坐标。在这种情况下，路径的坐标应该是：

[150,150], [160, 150], [160, 160]

- Mathyn

Answer 1

您想要做的是对每个路径分段坐标执行类似于以下操作的操作...

var root = document.getElementById("root");
var path = document.getElementById("path");
var point = root.createSVGPoint();
point.x = 0;  // replace this with the x co-ordinate of the path segment
point.y = 0;  // replace this with the y co-ordinate of the path segment
var matrix = path.getTransformToElement(root);
var position = point.matrixTransform(matrix);

alert(position.x + ", " + position.y);

<svg id="root">
  <g transform="translate(100, 100)">
    <g transform="translate(50, 50)">
        <path id="path" d="M 0,0 10,0 10,10"></path>
    </g>
</g>
</svg>

如果你发现SVG 2已经删除了getTransformToElement函数，那么这个polyfill可以恢复该方法。

- Robert Longson

---

嗨，罗伯特，谢谢你的回答，这正是我正在寻找的！ - Mathyn

Answer 2

从48版本开始，Chrome不再支持path.getTransformToElement()。

一个稍微简单的方法可能涉及到...

const path = document.getElementById("path");
const pathBBox = path.getBBox();
console.log(pathBBox.x, pathBBox.y);

- Dylan Maxey