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”是包含pieChart的svg元素的总宽度和高度

当正确的值文本太大时会出现问题：文本百分比重叠：

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

您对如何解决这个问题有什么建议吗？

我想到的两个解决方案是

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

Answer 1

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