Tengo un archivo .jsx . El código está debajo.

Lo que quiero: quiero mostrar un texto de varias líneas en el grupo: #someGroup .

Mi enfoque: he insertado un <rect> vacío como orientación donde debería estar el texto. Entonces sé dónde colocar el texto en mi svg.

<tspan> solo comienza en una coordenada definida. Que yo sepa, no hay ninguna función que rompa el texto después de un cierto número de caracteres.

Mi problema: ahora quiero escribir una función que rompa el texto después de una cierta longitud e inserte una nueva línea en forma de <tspan> (hasta donde sé, solo funciona con esto), solo un poco más abajo.

Simplemente no puedo entender cómo acceder al tamaño del tamaño de fuente respectivo.

Con esto, vería cuánto % del texto respectivo cabe en las primeras líneas y luego, si es necesario, comenzaría una nueva línea en un espacio.

Con saludos amistosos

Cómo lo devuelvo:

 <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; }

Mi función (WIP)

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