SVGテキスト（tspans付き）垂直オフセット

Question

<text>の周囲に矩形を描こうとしていますが、<tspans>（それぞれはdy=1em）です。

私はtextElement.getBoundingClientRect()を使用してテキストのサイズを確認し、それに応じてrectの属性を更新します。私が直面しています問題は<text>要素自体の垂直方向のオフセットです：

これは関係なく、私が（以下の例ではmiddle）を使用しています何alignment-baselineの存在のようです。

var translate = function(x, y) { 
 
    return 'translate(' + x + ',' + y + ')'; 
 
}; 
 

 
var bbox = d3.select('#stuff') 
 
    .node().getBoundingClientRect(); 
 
d3.select('#text-container').append('rect') 
 
    .attr({ 
 
    width: bbox.width, 
 
    height: bbox.height 
 
    }); 
 
d3.select('#stuff').attr('transform', 
 
    translate(bbox.width/2, 0) 
 
); 
 
d3.select('#middle').attr('transform', 
 
    translate(0, (bbox.height/2)) 
 
).attr('x2', bbox.width);

text { 
 
    alignment-baseline: middle; 
 
    text-anchor: middle; 
 
} 
 
#text-container rect { 
 
    fill: red; 
 
    opacity: 0.2; 
 
} 
 
tspan { 
 
    alignment-baseline: middle; 
 
    text-anchor: middle; 
 
    font-size: 20; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script> 
 

 
<svg width='400' height='900'> 
 
    <g transform='translate(100,100)' id='text-container'> 
 
    <circle cx=0 cy=0 r=3 fill="red"></circle> 
 
    <line x1=0 x2=100 y1=0 y2=0 stroke="green" id="middle"></line> 
 
    <text id='stuff'> 
 
     <tspan dy=1em x=0>where</tspan> 
 
     <tspan dy=1em x=0>is</tspan> 
 
     <tspan dy=1em x=0>this</tspan> 
 
     <tspan dy=1em x=0>offset</tspan> 
 
     <tspan dy=1em x=0>coming</tspan> 
 
     <tspan dy=1em x=0>from?</tspan> 
 
    </text> 
 
    </g> 
 
</svg> 
 
<p id="info"></p>

感謝を：ここで

は、コードは次のようになります！

Answer 1

使用getBBox：このサンプルで

var bbox = text.node().getBBox(); 

ルック：https://bl.ocks.org/mbostock/1160929。マイクは.getBBox（境界ボックスを取得）ここで

作業コードとフィドルを使用します。https://jsfiddle.net/dm9du4L6/