SVG 텍스트 (tspans 포함) 세로 오프셋

Question

<text>에 사각형을 그려서 <tspans> (각각은 dy=1em)으로 그려야합니다.

나는 textElement.getBoundingClientRect()을 사용하여 텍스트의 크기를 찾고 그에 따라 rect의 속성을 업데이트합니다. I가 직면하고있는 문제는 <text> 요소 자체의 수직 오프셋이다

이없이 I (아래 예에서 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를 사용합니다. @ Klaujesi의 대답에 따르면 https://jsfiddle.net/dm9du4L6/