Wie berechnet man die Koordinate eines SVG-Objekts nach Rotation und Skalierung?

Question

Ich möchte die Koordinaten eines SVG-Objekts (d. H. endende X- und Y-Koordinaten, wenn Start x, y Koordinaten und Höhe, uns bekannt sind) nach Drehung und Skalierung dieses SVG-Objekts wissen.

Gibt es irgendeine Art und Weise beenden Koordinaten der SVG-Objekte nach der Drehung zu berechnen?

Wenn jemand weiß, bitte helfen Sie mir, dieses Problem zu lösen.

Answer 1

BBox Methode ist hilfreich, um Ihre Start- und Endpunkt nach oder vor dem Aufbringen der Form oder ein Objekt zu erhalten.

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; 

Answer 2

Als Robert Longson erwähnt, können Sie die Transformationsmatrix auf jede Koordinate anzuwenden.

Sie können die Transformationsmatrix erhalten die getCTM() -Methode in der SVGLocatable Schnittstelle.

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

Zum Beispiel gelten die folgenden Schnipsel die Transformationsmatrix auf den (x, y) Koordinate des rect Elements.

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>