svg 连接不同样式的文本答案

【问题标题】：svg concatenate text of different stylessvg 连接不同样式的文本
【发布时间】：2013-12-25 10:33:16
【问题描述】：

我正在使用 d3 在 svg 元素内创建一个轴标签。标签的一部分是常量（字符串文字），一部分随着用户点击而变化。为了强调它的变化，我希望它是粗体的，而其余的文本是正常的重量。事实证明，将这两个文本元素相互对齐以及与绘图的其余部分对齐非常困难。

此外，文本元素中的尾随空格似乎被忽略了，这使得连接变得更加困难。如果有一种方法可以更改文本元素中的样式，那也可以。

这是一种非常老套的方法，因为它不适用于三段文本（因为text-anchor），结果很难居中（我真的需要使用getBBox()吗？ ?)。

function renderLabel(dynamicText){
     svg.select(".label").remove();
     var label = svg.append("g")
                    .attr("class", "label")


     label.append("text")
          .attr("text-anchor", "end")
          .text("The Axis is Based On ");

     label.append("text")
           .attr("text-anchor", "start")
           .style("font-weight", "bold")
           .attr("transform", "translate(6,0)") //space
           .text(dynamicText);
}

一般来说，我希望能够附加/连接任意数量的字符串变量，每个变量都有不同的样式，以一种“看起来不错”作为句子的方式，并且可以居中。请告诉我有更好的方法。

【问题讨论】：

标签： text svg d3.js

【解决方案1】：

不要使用单独的text 元素，而是使用一个text 元素和嵌套在其中的两个tspan 元素。 tspan如果不设置单独的定位属性，自然会排成一行文字。

https://developer.mozilla.org/en-US/docs/Web/SVG/Element/tspan

【讨论】：

谢谢，这正是我想要的！