Latest days I've been struggling with of how to automatically break lines of text in SVG text using d3.js.

I've tried to do it with <tspan> element, but in this case you would need to think about many things like looping for all your <text> elements, number of text symbols in one row, position of each and every line and so on 🤯

Then I even decided to check how it looks like in Adobe Illustrator, but break lines there are looking really ugly and weird 🤪: Each text symbol is in his own <text>- tag and this difficult logic with transform-matrix, but at the very first line on this code I noticed <rect> element with it's own position properties and as well as width and height 💡

So I decided that I need some kind of wrapper for my <text> elements, that's how I found information about <foreignObject> element and voila it worked for me:

My snippet of code in HTML:

<svg>
            <g class='labels'>
                <foreignObject id='l0'
                               width="80"
                               height="50">
                    <text class='hidden'></text>
                </foreignObject>
                <foreignObject id='l1'
                               width="80"
                               height="160">
                    <text class='hidden'></text>
                </foreignObject>
            </g>
        </svg>

My snippet of code in JS:

      d3.select("svg")
        .select("#l" + i)
        .attr("x", x)
        .attr("y", y)
        .text(text)
        .classed("hidden", false);

So, I made template in my HTML code with slots for my future <text> elements and each of them I wrapped into <foreignObject> element with it's own id which I call now on JS side and put text I needed just into it.

Good luck in coding! 😉