svg 文本定位，重叠或相同文本元素的两种样式

Question

我有两个不同的 svg 文本元素彼此水平对齐：

“Title1”、“20%”和“120.000”是三个独立的svg对象。120.000文本元素是末端锚定的，20%是中间锚定的。

我想要做的是放置 20% 的文本，因为它显示在图像上，但始终在它和 120.000 文本之间设置相同的空间。目前百分比的位置是这样设置的：

canvas.append("text")
          .attr("transform", "translate(" + ((width/2) - width/4) + " ," + (height/2 - 10) + ")")
          .style("text-anchor", "end")
          .text(function(d) { return data.values[0].percent});

其中“width”和“height”是保存饼图的svg元素的总宽度和高度

当右值文本太大时问题来了：百分比文本重叠：

我想将两段文本放在同一个文本元素中，但两段文本的样式不同。

您对如何解决此问题有任何建议吗？

我想到的两个解决方案是

• 能够为同一文本元素的两个部分设置两种不同的样式
• 某种方式（我不知道）计算右侧文本所占用的确切空间。

Answer 1

使用单个 <text> 元素和两个 <tspan> 子元素，以便您可以单独设置不同的 <tspan> 元素的样式。