Treemap diagram - Text wrap in SVG

What’s happening:

I’ve completed this challenge. However, the text that goes along with each <rect> is not ideal. I wrote a function to split each word to a new line by using tspan and assigning ‘x, y’ attributes but it’s not a good solution. Does anyone have any idea how make this svg text to auto align and wrap itself like <div> or <p> elements do?

Also, the css for <foreignObject> doesn’t work in Firefox and Edge. It works fine with chrome and opera. Anyone has a fix for this problem?

My codepen link:

*Challenge: * Visualize Data with a Treemap Diagram

*Browser information:

User Agent is: Mozilla/5.0 (Linux; Android 10; SAMSUNG SM-T865) AppleWebKit/537.36 (KHTML, like Gecko) SamsungBrowser/11.1 Chrome/75.0.3770.143 Safari/537.36.*