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

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

＆＃13;

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);

＆＃13;

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

＆＃13;

Answer 2

从v48开始，Chrome不再支持

path.getTransformToElmenent（）。

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

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

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

2 个答案: