要素に対して相対的に定義されたSVG座標（x、y）を絶対座標/位置に変換するにはどうすればよいですか？

Question

SVGで2つの円を結んで線を描こうとしています。円は、SVGグループelements（）にカプセル化された下にある長方形と一緒になっています。これらのグループは、transform = "translate（x、y）"属性で配置されます。 私の問題は、グループ内の要素の座標がグループの起点（0,0座標）に対して相対的に位置付けられているということです。上に重なる線を配置するには、絶対座標を知る必要があります。ここで

はD3 JavaScriptライブラリを使用してコードです：

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

ラインが表示されない理由を私は知っています。私はすべてのSVG要素が変換行列に関連していることも知っています。私はcircle要素の行列にアクセスする方法と、それらの絶対座標（cx/cy属性）を取得する方法についてはわかりません。もう一つの可能​​性は、円の絶対距離を得ることです。ここで

は、私は問題を自分で解決することができたと思いjsfiddle with the above code

Answer 1

です。変換行列へのアクセスは、X座標にE属性と値の値を加算し

circ1[0][0].getCTM() 

又は

circ1[0][0].getScreenCTM() 

を使用してを使用して達成することができますfの属性y座標私は要素の「絶対位置」を得ることができました。

更新jsfiddleは、私は私の解決策は、普遍的に有効ではないかと思いますhere

です。たとえば、私は変換を使用するケースで何が起こるかわからない：位置の計算の前にスケール？