SVG текст (с tspans) вертикальное смещение

Question

Я пытаюсь нарисовать прямоугольник вокруг <text> с mutliple <tspans> (каждый с dy=1em).

Я использую textElement.getBoundingClientRect(), чтобы найти размер текста, а затем обновите атрибуты моего rect соответственно. Вопрос, который я облицовкой вертикальное смещение самого элемента <text>:

Это, кажется, присутствует независимо от того, что alignment-baseline я использую (middle в приведенном ниже примере).

Вот что код выглядит следующим образом:

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/