CODEWITHSUNDEEP
javascriptd3.jssvg
mkHun
mkHun

Reputation: 5921

How to set the font-size in between words in SVG?

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.

For example, this is the code to make a bigger font: 

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");

For this one each time I'm giving the x position. But I can't get the x position of each word.

Upvotes: 1

Views: 104

Answers (1)

Gerardo Furtado
Gerardo Furtado

Reputation: 102219

If I understand your problem correctly, the easier solution is using a <tspan> element. Here is a demo:

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>

Upvotes: 1

Related Questions