SVG文本（使用tspans）垂直偏移

Question

我正在尝试在<text>周围绘制一个矩形，其中包含mutliple <tspans>（每个dy=1em}。

我正在使用textElement.getBoundingClientRect()查找文本的大小，然后相应地更新rect的属性。我面临的问题是<text>元素本身的垂直偏移：

无论我使用的是什么alignment-baseline（以下示例中为middle），这似乎都存在。

代码如下所示：

＆＃13;

＆＃13;

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

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

谢谢！

Answer 1

使用getBBox：

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

请看这个示例：https://bl.ocks.org/mbostock/1160929。 Mike使用.getBBox（获取边界框）

这里是您工作代码的小提琴：https://jsfiddle.net/dm9du4L6/