Wie stelle ich die Schriftgröße zwischen Wörtern in SVG ein?

Question

Ich versuche, die Schriftgröße zwischen den Wörtern zu erhöhen. Aber es funktioniert nicht wirklich. Ich kann nicht die Bedingungen für alle Wörter erstellen.

Zum Beispiel ist dies der Code eine größer Schriftart zu machen:

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

Für dieses jedes Mal, ich gebe die x-Position. Aber ich kann die x-Position jedes Wortes nicht bekommen.

Answer 1

Wenn ich Ihr Problem richtig verstehe, ist die einfachere Lösung ein <tspan> Element. Hier ist eine 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>