Evita los bugs en SVG animados con transform-origin en % 2.6.14
Sencilla solucción al bug de Firefox y Chrome en las transformaciones de SVG´s que implican valores para transform-origin en tanto por ciento (%).
Evita los bugs en SVG animados con transform-origin en %
En las lecturas que estoy haciendo estos días para conocer las relaciones entre Css y los SVG´s me he encontrado casi a la vez con dos referencias a los fallos de Firefox y Chrome al animar los dibujos vectoriales si se usan porcentajes en el valor de la propiedad transform-origin. Recuerda que un valor de center center no deja de ser 50% 50%.
- La primera referencia a estos fallos fue hace unos días en esta presentación sobre SVG (diapositiva 37 y siguientes) de @SaraSoueidan.
- La segunda fue en el blog de @jorgeATGU en el artículo Animando SVG con CSS3 en Firefox donde detalla el bug en FF.
- El fallo documentado en Chrome
- El bug recogido en Firefox
En ambos casos ofrecen diferentes solucciones (olvidarse del valor en % o añadir elementos <g> y algo más en el otro. Échales un vistazo a los originales que te enlacé antes.
Pero para que lo veas en acción este gif con autoría y origen en el blog de @jorgeATGU:
A la izquierda en Firefox y a la derecha Google Chrome.
El efecto en vivo para que puedas curiosear los códigos:
See the Pen fInpG by Lionel T (@elrumordelaluz) on CodePen.
Punto 1 a tener presente: observa que el svg está colocado en línea en el html del pen.
Punto 2 a tener presente: el pen es obra de @elrumordelaluz, aka Lionel T en codepen.
Mi solución: anima el svg o el g, no el path
Me sorprendió que para hacer algo tan sencillo como un giro hubiese que complicarse tanto. Así que mi primera aproximación fue utilizar el mismo svg del corazón, pero en vez de animar un elemento (el path) aplicar la animación (que es una transformación de giro) al svg.
El resultado es totalmente satisfactorio tanto en Firefox como Chrome:
See the Pen gtmEh by Kseso (@Kseso) on CodePen.
Tras una conversación en twitter con @jorgeATGU y @elrumordelaluz temí no haber comprendido bien la naturaleza del problema. Además me quedaba la duda de que estaba trabajando sobre un svg de un sólo path (o trazo o dibujito único).
Así que lo siguiente fue pasar a un svg de varios paths. Y como tenía a mano la K que uso abuso en el tema actual, la tomé de conejillo de indias.
En este caso la forma de usar el svg es la que llamé SVG desplazado
en el artículo SVG: guía de inicio. Esto es, haciendo uso del elemento defs y mostrándolo con el elemento y su atributo <use xlink:href="#id"></use>.
Recuerda que para mostrarlos de esta forma se necesita llamar a cada uno de los paths que conforman el gráfico con su "xlink" correspondiente contenido cada uno en su "svg viewBox="
<a class="svg" href="#">
<svg viewBox="0 0 100 100">
<use xlink:href="#beerware-1"/>
</svg>
<svg viewBox="0 0 100 100">
<use xlink:href="#beerware-2"/>
</svg>
</a>
Esto que a priori podría verse como un inconveniente nos permite actuar de forma selectiva sobre cada trazo o path que conforma el SVG. Pero con una diferencia muy significativa: el selector de Css usado ya no es a un elemento 'path' sino a un elemento 'SVG'.
Y haciéndolo de esta forma el bug no se manifiesta al declarar el valor de trasnform-origin en tantos por cientos.
svg.shape-superior {
transition: 1s linear;
transform-origin: 45% 45% 0;
animation: superior 2s infinite;
}
svg.shape-derecha {
transform-origin: 90% 95% 0;
animation: derecha 2s infinite;
}
Fíjate y recuerda que las clases '.shape-superior' y '.shape-derecha' están declaradas a elementos 'svg'.
El resultado puedes verlo en esta 'K' animada de cualquier manera para ejemplificar tanta parrafada y teoría:
See the Pen % on T-origin & svg by Kseso (@Kseso) on CodePen.
Y para terminar dejar constancia de mi agradecimiento tanto a Lionel T como a Jorge Atgu por atención y apuntes en twitter sobre este tema. Y si quieres informarte en español sobre el uso de SVG´s apúntate el blog de Jorge. Indispensable.
.){kind=link}
Kseso
the obCSServer ᛯ Ramajero Argonauta, Enredique Amanuense de CSS.#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Kseso