Javascript:在svg中找到位置

Question

我有一个 svg 文件(我无法控制其布局)。该文件包含很多层(实现为嵌套 <g> )，其中包括翻译。我有一个圆圈，我想知道它的坐标。这是一个简化的示例:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 100 100" >
    <g transform="translate(5, 2)">
        <g class="big pos" transform="translate(20, 3)">

            <!-- c is this circle. find the center coords of c -->
            <!-- x = 5 + 20 + 5 + 50 = 80 -->
            <!-- y = 2 + 3 + 4 + 50 = 59 -->
            <circle id="c" transform="translate(5, 4)" class="center" cx="50" cy="50" r="30"></circle>
        </g>
    </g>
</svg>

我需要一种方法来找到 c 的中心坐标.到目前为止，我已经试过了:

center = document.getElementById('c');
matrix = center.getCTM();
var mx = matrix.e / Math.abs(matrix.d); 
var my = matrix.f / Math.abs(matrix.d);
// Get cx, cy from center.
// x = mx + cx, y = my + cy

这种方法有两个问题。 1)任何旋转都会弄乱这些值。 2) 我真的不知道我在做什么。

获取 c 的坐标(相对于 svg 的根)的正确方法是什么？ ？最好使用纯 JavaScript，不要使用 D3 或任何类似的库。

Answer 1

也许是这样的……

var center = document.getElementById('c');
var root = document.getElementById('root');
var point = root.createSVGPoint();
point.x = center.cx.animVal.value;
point.y = center.cy.animVal.value;
var matrix = c.getTransformToElement(root);
var position = point.matrixTransform(matrix);

alert(position.x + ", " + position.y);

<svg id="root" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 100 100" >
    <g transform="translate(5, 2)">
        <g class="big pos" transform="translate(20, 3)">

            <circle id="c" transform="translate(5, 4)" class="center" cx="50" cy="50" r="30"></circle>
        </g>
    </g>
</svg>