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

Question

我正在创建一个将 SVG 文件转换为我自己的格式的程序。我已经创建了一个基于 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

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

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 将恢复缺少的方法。

Answer 2

从 v48 开始，Chrome 不再支持

path.getTransformToElmenent()。

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

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

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

Get absolute coordinates of SVG path with Javascript

javascript

svg