javascript - 如何在 SVG 中的单词之间设置字体大小？

Question

我正在尝试增加单词之间的字体大小。但它实际上并没有起作用。我不能为所有的话创造条件。

例如，这是制作更大字体的代码:

var country_x = (country1.length > 4)?0:140;

top_text.append("text")
.attr("x",country_x)
.attr("y",120)
.attr("font-size","50")
.attr("fill","white")
.style("text-anchor","middle")
.attr("font-family","Franklin Gothic Demi Cond")
.text(country1);  // This I need to change the style

top_text.append("text")
.attr("x",215)
.attr("y",120)
.attr("font-size","38")
.attr("fill","white")
.attr("font-family","Calibri")
.text("will grow"); 

对于这个，我每次都给出 x 位置。但是我无法获取每个单词的 x 位置。

Answer 1

如果我正确理解您的问题，更简单的解决方案是使用 <tspan>元素。这是一个演示:

var svg = d3.select("svg");
svg.append("text")
  .attr("x", 10)
  .attr("y", 50)
  .style("font-size", "12px")
  .text("this is a ")
  .append("tspan")
  .style("font-size", "40px")
  .text("very big ")
  .append("tspan")
  .style("font-size", "12px")
  .text("font size")

<script src="https://d3js.org/d3.v4.min.js"></script>
<svg></svg>