Question

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

我想将tspan元素相对于周围text元素的宽度居中。我知道可以通过在text-anchor="middle"或两个text上设置tspan来做到这一点，但是我不能这样做，因为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。

当周围的<text>元素具有text-anchor = start时，将SVG <tspan>元素居中

1 个答案: