Problema con archivos SVG

Soy el Gerente de Diseño en una empresa nueva que vende artículos impresos personalizados, como fundas para teléfonos/tabletas y relojes.

He creado una graduación de reloj con números, marcadores de hora y marcadores de minutos para usar en el personalizador de nuestro sitio web.

Todo parece estar bien en Illustrator.

Luego cargué el archivo SVG al personalizador en el sitio web y nuevamente parece estar bien.

Sin embargo, cuando el diseño en el que se ha utilizado la graduación se descarga de nuestro sitio web, los marcadores de minutos giran de modo que, en lugar de estar alineados desde el centro del reloj hasta el borde, todos se han realineado para apuntar verticalmente.ingrese la descripción de la imagen aquí

El hecho de que solo hagan esto después de descargarlos de nuestro sitio web me hace pensar que el problema lo está causando nuestro personalizador.

Si este problema lo causa nuestro personalizador, tendré que pedirle a nuestro desarrollador web que lo solucione, lo que costará mucho.

No puedo usar ningún otro formato (como png), ya que significa que el cliente no puede cambiar el color de la graduación dentro del personalizador.

¿Alguien sabe qué está causando este problema?

¿O tal vez hay un trabajo que no he pensado?

Cualquier ayuda sería muy apreciada.

Respuestas (1)

Supongo que esto se debe a que Illustrator está exportando los marcadores como rects con una matriz de transformación, y eso se está perdiendo en el camino de alguna manera.

Lo que tienes es algo como:

<rect x="100" y="200" width="5" height="60"
      transform="matrix(0.7953 -0.6062 0.6062 0.7953 -90.8174 130.1822)" />

Una solución fácil es convertir sus marcadores en rutas compuestas, que generarán pathelementos (sin transformación) en su lugar.

Simplemente seleccione todos sus marcadores y vaya a Objeto → Ruta compuesta → Crear o presione cmd+ 8. A continuación, tendrá un sencillo pathen la exportación. Algo como:

<path d="M168.288,222.531l-4.331,3.301l-37.512-49.215l4.331-3.301L168.288,222.531z M296.695,243.748l-1.064-5.845 l64.289-11.711l1.064,5.845L296.695,243.748z"/>

Si realmente necesita objetos distintos, puede convertir cada marcador en una ruta compuesta individualmente, pero de lo contrario, simplemente selecciónelos todos y cree una ruta compuesta grande.

Muchas gracias, funcionó perfectamente. No tienes idea de cuánto tiempo he pasado tratando de resolver esto. Debería haber publicado aquí hace días. Gracias de nuevo
No hay problema @Tom
y bienvenido a GDSE! Si tiene alguna pregunta, consulte el centro de ayuda o comuníquese con uno de nosotros en el chat de diseño gráfico una vez que su reputación sea suficiente (20). ¡Sigue contribuyendo y disfruta del sitio!
Publiqué otra pregunta hace un rato, pero no puedo ver ningún registro de ella en mi perfil, ¿sabes por qué es esto?
@TomMoose no estoy seguro, no veo ninguna otra pregunta en tu perfil. ¿Puedes encontrar un enlace a él en el historial de tu navegador, tal vez?
Problema con archivos SVG
RespuestasAquíPolítica de privacidad1y, 0v