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

Get absolute coordinates of SVG path with Javascript

本文关键字：坐标 路径 Javascript 获取 SVG 使用      更新时间：2023-09-26

我正在创建一个程序，该程序将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]

您想要的是对每个路径段坐标执行类似的操作。。。

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>

如果您发现由于getTransformToElement函数在SVG 2中被删除，所以它不再存在，那么这个polyfill将恢复丢失的方法。

path.getTransformToElement（）在Chrome v48中不再受支持。

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

const path = document.getElementById("path");
const pathBBox = path.getBBox();
console.log(pathBBox.x, pathBBox.y);
相关文章：