Actualmente estoy escribiendo un generador basado en React y SVG usando mechanic.design (un framework JS). Este generador tiene diferentes posibilidades de entrada que son declaradas por diferentes campos.

Ahora tengo el siguiente problema y es que tengo un campo de texto y cuando se hace demasiado largo sale de mi ViewBox y no hace un salto de línea. He leído en línea que un salto de línea no es compatible con SVG, pero tengo curiosidad por saber si se puede hacer de forma indirecta usando React.

La configuración manual de saltos de línea es algo que he visto hacer con texto estático, pero el generador crea texto dinámico con diferentes longitudes, por lo que no puedo configurar manualmente los saltos.

Debajo de un código para la parte visual:

 import React, { useEffect, useState } from "react"; import ImgBanner from './assets/banner.svg'; import "./styles.css"; export const handler = ({ inputs, mechanic }) => { const { width, height, schriftfarbe, subtitel, titel, titel2, untertitel, } = inputs; useEffect(() => { mechanic.done(); }, []); return ( <svg width={width} height={height}> <rect width={width} height={height} /> <image href={ImgBanner} width={width} height={height} /> <image x={950} y={-10} width={200} height={200} href={href} > </image> {/* The text */} <text x={25} y={75} fill={schriftfarbe} textAnchor="start" fontWeight="regular" fontFamily="Garnett Regular" fontSize={30} > {subtitel} </text> <text x={25} y={height / 2} fill={schriftfarbe} textAnchor="start" fontWeight="regular" fontFamily="Garnett Regular" fontSize={72} > {titel} <tspan> </tspan> </text> <text x={25} y={height / 2 + 90} fill={schriftfarbe} textAnchor="start" fontWeight="regular" fontFamily="Garnett Regular" fontSize={72} > {titel2} </text> <text x={25} y={575} fill={schriftfarbe} textAnchor="start" fontWeight="regular" fontFamily="Garnett Regular" fontSize={30} > {untertitel} </text> </svg> ); };

¡Gracias por adelantado!