I have a .jsx file. The code is below.

What I want: I want to display a multiline text in the group : #someGroup.

My approach: I have inserted an empty <rect> as orientation where the text should be. So I know where to place the text in my svg.

<tspan> only starts at a defined coordinate. As far as I know there is no function that breaks the text after a certain number of characters.

My problem: Now I want to write a function myself which breaks the text after a certain length and inserts a new line in the form of <tspan> (as far as I know it only works with this), only a little further down.

I just can't figure out how to access the size of the respective font size.

With this, I would see how much % of the respective text fit into the first lines and then, if necessary, start a new line at a space.

With friendly greetings

How I return it:

<svg>
    ...
    <g id="someGroup">
    <rect id="someRect" x="296" y="51.3676"
    width="184" height="135.265" fill={"none"}/>
    <text id="testText" className={styles.testText}>
    {renderText}
    </text>
    </g>
    ... 
</svg>

/* The CSS: */

.testText{
    font-family: "Times New Roman", Times, serif;
    font-size: 17px;
    fill: black;
    letter-spacing: 0em;
}

My function (WIP)

function renderText(x,y fontsize ) {
    let message = `Please try another search term.`;
    return (
            <tspan x={"296"} y={"60"}>{message}</tspan>
    );
}