如何在旋转和缩放后计算SVG对象的坐标？

Question

我想知道一个SVG对象在旋转和缩放后的坐标（即如果我们已知起始x，y坐标和高度、宽度，则为结束x和y坐标）。

是否有任何方法可以计算旋转后SVG对象的结束坐标？

如果有人知道，请帮助我解决这个问题。

- Babu

---

将变换矩阵应用于每个坐标。 - Robert Longson

你知道应用旋转和平移后起始的 x 和 y 坐标吗？ - Nitesh singh

如果您有任何示例代码，那对我理解问题会更有帮助。 - Nitesh singh

Answer 1

如Robert Longson所述，您可以将变换矩阵应用于每个坐标。

您可以使用SVGLocatable接口中的getCTM()方法获取变换矩阵。

http://www.w3.org/TR/SVG/types.html#InterfaceSVGLocatable

例如，以下代码片段将转换矩阵应用于矩形元素的（x，y）坐标。

var pointBefore = document.getElementById("pointBefore");
var pointAfter = document.getElementById("pointAfter");
var svg = document.getElementById("svg");
var rect = document.getElementById("rect");
var ctm = rect.getCTM();
var p = svg.createSVGPoint();
p.x = rect.getAttribute("x");
p.y = rect.getAttribute("y");
pointBefore.textContent = p.x + ", " + p.y;
p = p.matrixTransform(ctm);
pointAfter.textContent = p.x + ", " + p.y;

<svg id="svg" width="200" height="200" style="border: 1px solid black;">
    <rect id="rect" x="25" y="25" width="50" height="50" transform=" scale(2) rotate(15,50,50)"/>
</svg>
<p>point (before transform): <tspan id="pointBefore"></tspan></p>
<p>point (after transform): <tspan id="pointAfter"></tspan></p>

- Bobby Orndorff

Answer 2

BBox方法有助于在应用形状或对象之前或之后获取起始点和终止点。

You can select the object using d3 or jquery
        if you are using d3 the select in this way 
                    var rect = d3.select(selecteObject);
        if jquery then 
                   var rect = $(selecteObject);
                   var newx = rect.node().getBBox().x;
                   var newy = rect.node().getBBox().y;
                   var neww = rect.node().getBBox().width;
                   var newh = rect.node().getBBox().height;
                   var endCodinatex = newx + neww;
                   var endCodinatY = newy + newh;

- Nitesh singh