Sometimes, we want to add line breaks to SVG text with JavaScript.
In this article, we’ll look at how to add line breaks to SVG text with JavaScript.
How to add line breaks to SVG text with JavaScript?
To add line breaks to SVG text with JavaScript, we set the text location explicitly.
For instance, we write
g.append("svg:text")
.attr("x", 0)
.attr("y", 30)
.attr("class", "id")
.append("svg:tspan")
.attr("x", 0)
.attr("dy", 5)
.text((d) => {
return d.name;
})
.append("svg:tspan")
.attr("x", 0)
.attr("dy", 20)
.text((d) => {
return d.sName;
})
.append("svg:tspan")
.attr("x", 0)
.attr("dy", 20)
.text((d) => {
return d.idCode;
});
to call attr with 'dy' to set the y position of the tspan element relative to the first tspan.
Conclusion
To add line breaks to SVG text with JavaScript, we set the text location explicitly.
