javascript - 如何找到 SVG 元素的翻译坐标？

Question

我有一个设置了 x 和 y 的 SVG 元素，但我也使用 transform="translate(a, b)"，它改变了它呈现的坐标，但显然不会更新它的 x 和 y 属性。有没有办法获取实际坐标，在本例中为 x + a 和 y + b，而无需直接解析值转换属性？

并不是说这是一个特定于 D3 的问题，但我的代码如下所示:

svg.selectAll(selector)
    .attr("x", x)
    .attr("y", y)
    .attr("width", width)
    .attr("height", height)
    .attr("transform", `translate(${a}, ${b})`);

Answer 1

好吧，这不是真正的 D3 相关，而是纯 SVG/javascript:

我在这里使用这个我称之为“扁平化”的函数，基本上你想将矩阵重置为未转换的矩阵(矩阵(1 0 0 1 0 0))并用它们的扁平化值更新路径点:

flattenShape(item, matrix) {
    let points = item.pathPoints;
    let l = points.length;
    for (let i = 0; i<l; i++) {
        let cache = this.mainSVG.createSVGPoint();
        cache.x = points[i].x;
        cache.y = points[i].y;
        cache = cache.matrixTransform(matrix);
        points[i].x = cache.x;
        points[i].y = cache.y;
    }
    item.d = this.constructPath(points);
    item.transform = "matrix(1 0 0 1 0 0)";
};

item - 您的 SVG 元素，matrix - 您需要获取相关元素的实际 SVGMatrix。我得到它使用:

let matrix = YOUR_SVG_ELEMENT.transform.baseVal.consolidate().matrix;

所以我的方法可能过于具体但一般来说:

• 合并您正在转换的 SVG 元素的矩阵。
• 使用 SVGPoint 执行: matrixTransform(matrix) 对于每个有问题的坐标。
• 将转换属性重置为初始状态，例如矩阵变换(矩阵)