SVGの単語間にfont-sizeを設定するにはどうすればよいですか？

Question

私は単語の間にフォントサイズを増やそうとしています。しかし実際には働いていません。私はすべての単語の条件を作成することはできません。この1たびに、私はx位置を与えているため

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の位置を得ることができません。

Answer 1

私が問題を正しく理解していれば、簡単な解決策は<tspan>要素を使用することです。私は、Firefox 50.1.0でコードを実行していることだし、それが動作していない -

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>