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

Question

x我有一个带有和设置的SVG 元素y，但我还使用 ，通过某个向量翻译它transform="translate(a, b)"，这会更改它渲染的坐标，但显然不会更新它的x和y属性。有没有办法获取实际坐标（在本例中为x + a和 ）y + b，而不必直接从transform属性中解析值？

这并不是 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)。
• 将变换属性重置为初始状态，例如matrixTransform(matrix)