title: How to set the font-size in between words in SVG?
body: <p>I'm trying to increase the font size in between the words. But it is not actually working. I can't create the conditions for all words. </p>
  
  <p>For example, this is the code to make a <strong>bigger</strong> font:     </p>
  
  <pre><code>var country_x = (country1.length &gt; 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"); 
  </code></pre>
  
  <p>For this one each time I'm giving the x position. But I can't get the x position of each word.</p>