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>

Javascript: 在 svg 中查找位置

Javascript: find position in svg

javascript

svg