Meta

Para animar un coche (niño svg) conduciendo por una carretera. (padre svg)

Ambiente

Estoy usando reaccionar para crear una página de destino, que tiene una breve animación en bucle. Para incluir svg como componente de reacción, utilicé esta herramienta en línea para convertir el código svg en código compatible con jsx.

Problema

1. Tanto los svgs (coche (representado por 2) como la ciudad (representada por 1) ) tienen propiedades únicas de viewbox y tienen diferentes tamaños predeterminados. El svg del coche es mucho más grande que el svg de la ciudad.
2. Tuve que escalar la etiqueta svg del automóvil a .1 solo para obtener la misma escala que la ciudad svg {transform: scale(.1)}
3. Y para hacer que el auto se mueva, {transform : translateY(7000px) translateX(5000px)}

Mi pregunta y mi duda subyacente es, ¿por qué necesito traducir el svg en miles de píxeles (7000 px, 5000 px) para moverlo casi un cuarto, es decir, 200 px (el tamaño de mi pantalla es 1440x900 px) en la pantalla?

Motivación para este enfoque

Sé que puedo editar el archivo svg en una herramienta de dibujo vectorial y exportar el svg que contiene tanto la ciudad como el automóvil, me daría los resultados deseados. PERO

Utilicé conscientemente un componente svg dentro de otro svg para que me sea más fácil hacer cambios en el futuro y reutilizar los componentes. (múltiples svgs de automóviles y árboles y edificios, etc. en mi caso), es decir, para hacer que el código sea más modular y legible.

¿Cómo hago que la escala de svgs sea similar? (No puedo plantear esta pregunta correctamente, pero creo que aclaré mi situación) ¿Qué pasa si no uso una relación padre-hijo para los svgs sino una relación entre hermanos? ¿Entonces que?

Estructura de archivos

• componente de la aplicación
  • Componente de página de destino
    • Componente de barra de navegación
    • componente de contenido
      • Ciudad SVG
        • Coche SVG

Misma sangría son componentes hermanos, una diferencia de sangría son componentes padre-hijo.

Código SVG (compatible con JSX)

Cuadro de visualización SVG de los padres (ciudad)

 <svg xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink" viewBox="0 0 982.24 781.46"

Caja de visualización SVG para niños (coche)

 <svg xmlns="http://www.w3.org/2000/svg" id="car" data-name="car" viewBox="0 0 1361.91 1048.49" >