<tspan> 当周围的<text>元素具有文本锚点=开始时，居中 SVG 元素

Question

<text text-anchor="start|end">
<tspan>Header line</tspan>
<tspan>Sub</tspan>
</text>

我想使tspan元素相对于周围text元素的宽度居中。我知道可以通过在text或两个tspan上设置text-anchor="middle"来做到这一点，但我不能这样做，因为text元素是位于弧外的饼图标签(用2.2 * arc centroid计算的位置(，我必须将text-anchor设置为start在饼的右侧，end在左侧侧，以便正确定位标签。我希望这是有道理的。

有人可以给我一个提示吗？ :)

谢谢！

Answer 1

你有一个空的<text>元素有两个<tspan>，这有点奇怪。我想你想要Header list作为文本，Sub作为tspan。

如果这是正确的，一个可能的解决方案是用this.parentNode.getComputedTextLength()获取文本的长度，将借出长度的tspan定位一半并将其text-anchor设置为middle：

const svg = d3.select("svg");
const text = svg.append("text")
.attr("x", 100)
.attr("y", 20)
.text("Header line")
.append("tspan")
.attr("text-anchor", "middle")
.attr("dy", "1em")
.attr("x", function() {
return 100 + this.parentNode.getComputedTextLength() / 2;
})
.text("Sub")

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

更改上面代码段中计算出的代码位置的幻数100。