css - online - svg text size

Porcentaje de origen de transformación para SVG no obedecido en Firefox, solo a veces en WebKit

Question

Tengo este gráfico SVG de cono de helado y quiero transformar la pala con un transform-origin de transform-origin del 50% 100% (parte inferior central). Firefox dice obedecer (es decir, el inspector señala el transform-origin correcto), pero de hecho se transforma en la esquina superior izquierda. WebKit, extrañamente, solo obedecerá si un elemento padre tiene font-size:100% establecido.

Estas son preguntas muy similares, pero solo pertenecen a Firefox:

1. Establecer origen de transformación en el grupo SVG no funciona en Firefox

2. Cómo configurar el origen de la transformación en SVG

3. Transform Origin no funciona en Firefox

Answer 1

Hace poco me encontré con el mismo problema; así es como resolví esto:

De acuerdo con esta página sobre animación SVG con transformaciones CSS , los principales navegadores simplemente no son consistentes en la aplicación transform-origin a elementos SVG. El autor de la página creó una plataforma de animación de JavaScript llamada GSAP y explica algunos de sus cálculos de transform-origin en el artículo. Si bien es más que bienvenido implementar las matemáticas usted mismo con JavaScript para arreglar los orígenes de SVG, eché un vistazo a GSAP (específicamente la herramienta TweenLite) y terminó satisfaciendo mis necesidades perfectamente. Si está bien utilizando una biblioteca externa en su sitio web, le recomendaría utilizar su herramienta para realizar animaciones en elementos SVG, ya que le permite animar elementos de manera consistente en todos los navegadores principales. Obviamente no es preferible transform-origin simplemente trabajando como se supone que debe hacerlo, pero hasta que los navegadores se actualicen, esta ha sido una alternativa adecuada para mí.