使用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]

Answer 1

从 v48 开始，Chrome 不再支持 path.getTransformToElement()。

稍微简单一点的方法可能需要......

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

Answer 2

你想要的是对每个路径段坐标做这样的事情......

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>