Javascript:在 svg 中查找位置

Javascript: find position in svg

本文关键字：查找 位置 svg Javascript      更新时间：2023-09-26

我有一个 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或任何类似的库。

也许是这样...

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>

相关文章：