Wie kann ich relativ zu einem Element definierte SVG-Koordinaten (x, y) in absolute Koordinaten/Positionen umrechnen?

Question

Ich versuche, eine Linie zu zeichnen, zwei Kreise in SVG zu verbinden. Die Kreise sind - zusammen mit darunterliegenden Rechtecken - in einer SVG-Gruppen-Elemente() eingekapselt. Diese Gruppen werden mit den Attributen transform = "translate (x, y)" positioniert. Mein Problem ist, dass die Koordinaten der Elemente innerhalb der Gruppe relativ zu den Ursprüngen (0,0 Koordinaten) ihrer Gruppen positioniert sind. Um eine darüberliegende Linie zu platzieren, muss ich die absoluten Koordinaten kennen.

Hier ist der Code der D3 mit Hilfe von JavaScript-Bibliothek:

var body = d3.select("body"); 

var svg = body.append("svg"); 

var group1 = svg.append("g") 
    .attr("transform", "translate(50,50)"); 

var rect1 = group1.append("svg:rect") 
    .attr("x", 0) 
    .attr("y", 0) 
    .attr("width", 100) 
    .attr("height", 100) 
    .style("fill", 'lightblue'); 

var circ1 = group1.append("svg:circle") 
    .attr("cx", 50) 
    .attr("cy", 50) 
    .attr("r", 10) 
    .style("fill", 'red') 

var group2 = svg.append("g") 
    .attr("transform", "translate(350,50)"); 

var rect2 = group2.append("svg:rect") 
    .attr("x", 0) 
    .attr("y", 0) 
    .attr("width", 100) 
    .attr("height", 100) 
    .style("fill", 'lightgreen'); 

var circ2 = group2.append("svg:circle") 
    .attr("cx", 50) 
    .attr("cy", 50) 
    .attr("r", 10) 
    .style("fill", 'red'); 

var line = svg.append("svg:line") 
    .attr("x1", parseInt(circ1.attr("cx"))) 
    .attr("y1", parseInt(circ1.attr("cy"))) 
    .attr("x2", parseInt(circ2.attr("cx"))) 
    .attr("y2", parseInt(circ2.attr("cy"))) 
    .attr("stroke", "black"); 

weiß ich, warum die Linie nicht angezeigt. Ich weiß auch, dass jedes SVG-Element mit einer Transformationsmatrix zusammenhängt. Ich bin nicht sicher, wie man auf die Matrizen der Kreiselemente zugreift und wie man die absoluten Koordinaten von ihnen erhält (die cx/cy Attribute). Eine andere Möglichkeit wäre, die absolute Entfernung der Kreise zu erhalten.

Hier ist ein jsfiddle with the above code

Answer 1

Ich glaube, ich war in der Lage, das Problem selbst zu lösen. Der Zugriff auf die Transformationsmatrix erreicht

verwendet werden könnte

circ1[0][0].getCTM() 

oder durch

Verwendung

circ1[0][0].getScreenCTM() 

, indem der Wert des e Attribut dem x Koordinate und der Wert der f Attribut an die y Koordinate konnte ich die "absolute Position" der Elemente bekommen.

Aktualisiert jsfiddle ist here

Ich fürchte, meine Lösung nicht allgemeingültig ist. Zum Beispiel bin ich mir nicht sicher, was passiert in einem Fall, den ich Umwandlung verwenden werde: Skala vor der Berechnung der Position?