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

这样的事可能......

＆＃13;

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);

＆＃13;

<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>

＆＃13;

Javascript：在svg中找到位置

1 个答案: