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

【问题标题】：Get absolute coordinates of SVG path with Javascript使用 Javascript 获取 SVG 路径的绝对坐标
【发布时间】：2015-05-05 12:05:24
【问题描述】：

我正在创建一个将 SVG 文件转换为我自己的格式的程序。我创建了一个基于 Web 的应用程序来执行此操作。我使用 Web 浏览器的默认 DOM 解析功能来迭代 SVG 内容。

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

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

我可以使用以下方法获取路径段：

var pathSegments = path.pathSegList

但是，这些路径段与定义的任何父 SVG 元素相关。变换不包含在路径段列表中。

有没有办法获得这条路径的绝对坐标，因为它们最终在屏幕上绘制时使用？

示例：假设我得到了以下 SVG sn-p：

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

【问题讨论】：

标签： javascript svg

【解决方案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>

如果您使用 Chrome 并且发现不再有 getTransformToElement 函数，那么this polyfill 将恢复该缺失的方法。

【讨论】：

嗨罗伯特，感谢您的回答，这正是我要找的！

【解决方案2】：

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

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

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

【讨论】：