Tengo un svg que contiene una etiqueta de secuencia de comandos que es interactiva y reacciona a las pulsaciones de teclas. Hasta ahora no puedo hacer que svg funcione en react.js.

Puedo mostrar el svg estáticamente usando un elemento img:

<img src={*svg code*} alt="svg title" width="400px"/>

hacerlo de esta manera, sin embargo, no ejecuta el elemento de secuencia de comandos en el svg y, por lo tanto, no es interactivo. También intenté usar el paquete svgr y seguí exactamente la guía del sitio web:

npm install --save-dev @svgr/core

import { transform } from '@svgr/core'

 const jsCode = await transform( svgCode, { icon: true }, { componentName: 'MyComponent' }, )

cuando cambio los nombres de las variables y ejecuto esto, obtengo errores como:

./node_modules/@ampproject/remapping/dist/remapping.mjs No se puede importar la exportación con nombre 'TraceMap' desde un módulo que no es EcmaScript (solo está disponible la exportación predeterminada)

y un montón de otros errores, pero con "TraceMap" reemplazado por otra cosa

nota al margen: en mi elemento en mi svg, tengo

type="text/javascript"

dado que los errores dicen 'de no EcmaScript...' lo cambié a

type="application/ecmascript"

Obtengo los mismos errores de cualquier manera.

No estoy seguro de cuál es la diferencia, son solo las dos versiones que conozco.

¿Alguien sabe qué estoy haciendo mal? Creo que svgr es la solución de alguna manera, pero no de la forma en que lo estoy haciendo.

¿Algunas ideas?

¡¡¡Gracias!!!