SVG：如何通过底线水平对齐两个文本元素？

Question

我有一个使用d3创建图表的webapp。在图表的底部，我想附加两个文本元素：一个在右下角有固定内容，一个由一行组成，另一个在左下角有动态内容，可以有一行或多行。 svg代码看起来基本上是这样的：

<text id="dynamicContent" >
<tspan>line1</tspan>
<tspan>line2</tspan>
</text>
<text id="static content">line1</text>

这两个元素当前附加到svg元素，如下所示：

chart.append("text")
    .attr("id", "dynamicContent")
    .attr("x", valueX1)
    .attr("width", WIDTH - MARGINS.right)
    .text(getDynamicContent())
    .call(wrap, width)
    .attr("y", function () {
        return HEIGHT - $('#dynamicContent')[0].getBBox().height
    });

chart.append("text")
    .attr("class", "source")
    .attr("x", valueX2)
    .attr("y", valueY2)
    .text("staticContent")
    .style("text-anchor", "end");

function wrap(text, width) {
      text.each(function() {
        var text = d3.select(this),
            words = text.text().split(/\s+/).reverse(),
            word,
            line = [],
            lineNumber = 0,
            lineHeight = 1, // ems
            y = text.attr("y"),
            tspan = text.text(null)
                        .append("tspan")
                        .attr("x", 5)
                        .attr("y", y)
                        .style("dominant-baseline", "hanging");
        while (word = words.pop()) {
          line.push(word);
          tspan.text(line.join(" "));
          if (tspan.node().getComputedTextLength() > width) {
            line.pop();
            tspan.text(line.join(" "));
            line = [word];
            tspan = text.append("tspan")
                        .attr("x", 5)
                        .attr("y", y)
                        .attr("dy", ++lineNumber * lineHeight + "em")
                        .text(word);
          }
        }
      });
    }

我已经花了好几个小时按照他们的底线来调整这两个，但没有成功。我想问题是文本元素的锚点位于左上角。因此，如果我想要它们总是在图形的底部，我尝试过这样的事情：

.attr("y", height - $('#dynamicContent'[0].getBBox().height)

不幸的是，这似乎只适用于Firefox，但是在chrome中，它似乎覆盖了两行。

这是一个小细节，我无处可去，所以如果有人有一些建议，我会感激不尽。感谢。