Animación SMIL SVG en desuso reemplazada por CSS o efectos de animaciones web (desplazarse, hacer clic)
De acuerdo con este tema:
Problemas SMIL de Firefox 38-40: velocidad muy lenta (resuelto en la versión 41 de FF del 22.09.15)
y este tema:
Intención de desaprobación: SMIL
La etiqueta SVG 'animateTransform' no funciona bien. Sería bueno reemplazar SMIL (etiqueta animada) con transiciones CSS o CSS.
CONSOLE WARNING: Please use CSS animations or Web animations instead),
which would work fast on the latest versions of Firefox and Chrome.
La siguiente advertencia de Google Chrome:
CONSOLE WARNING: SVG's SMIL animations ('animate', 'set', etc.) are deprecated
and will be removed. Please use CSS animations or Web animations instead.
Revisión 196823: Agregar advertencia de desuso SMIL
Para empezar, necesito implementar tres cosas:
1) Efecto de desplazamiento al pasar el mouse (el más fácil)Cómo fue:
<rect x="-0.5" y="-0.5" width="1" height="1" fill="white">
<!--it makes half-visible selecting effect -->
<set attributeName="stroke-opacity" begin="mouseover" end="mouseout" to="0.5"/>
<!-- explicitly reverse the opacity animation on mouseout -->
<set attributeName="stroke-opacity" begin="mouseout" end="mouseover" to="1"/>
</rect>
Quité elset
etiquetas, clases agregadas a larect
etiqueta y agregado a esto a la seudoclase de desplazamiento del CSS:
.element_tpl:hover {
stroke-opacity: 0.5;
}
2) Se escala varias veces después del cambio comprometido con este elemento (carga de página)Cómo fue:
<!--animation-->
<!--it scales a few times after change committed to this element -->
<animateTransform attributeType="XML" attributeName="transform" type="scale" dur="0.5s" keyTimes="0;0.5;0.5;1" values="1;1.12;1.12;1" repeatCount="6" fill="freeze"/>
Cómo organizar sin elanimate
etiqueta:
???
3) Anima la escala hacia arriba y hacia abajo (onclick)Cómo fue:
<!--it animates scale up and scale down onclick -->
<animateTransform attributeName="transform" attributeType="XML" type="scale" from="1" to="1.15" repeatCount="1" begin="mousedown+0.2s" dur = "0.2s" fill="freeze"/>
<animateTransform attributeName="transform" attributeType="XML" type="scale" from="1.15" to="1" repeatCount="1" begin="mouseup+0.4s" dur = "0.2s" fill="freeze"/>
Cómo organizar sinanimate
¿etiqueta? Intenté usar:active
, pero hay diferencias en el comportamiento:
.element_tpl:active {
transform: scale(1.1);
}
Este es el código completo de mi elemento de plantilla:
<g id="switcher" cursor="pointer" stroke-width="0.15">
<g transform="scale(1,1.375)">
<g>
<rect x="-0.5" y="-0.5" width="1" height="1" stroke="white" pointer-events="none"/>
<rect x="-0.5" y="-0.5" width="1" height="1" fill="white">
<!--it makes half-visible selecting effect -->
<set attributeName="stroke-opacity" begin="mouseover" end="mouseout" to="0.5"/>
<!-- explicitly reverse the opacity animation on mouseout -->
<set attributeName="stroke-opacity" begin="mouseout" end="mouseover" to="1"/>
</rect>
<line x1="0" y1="-0.25" x2="0" y2="0.25" stroke-width="0.17" stroke-linecap="round" pointer-events="none"/><!-- vertical on -->
<!--animation-->
<!--it scales a few times after change committed to this element -->
<animateTransform attributeType="XML" attributeName="transform" type="scale" dur="0.5s" keyTimes="0;0.5;0.5;1" values="1;1.12;1.12;1" repeatCount="6" fill="freeze"/>
<!--it animates scale up and scale down onclick -->
<animateTransform attributeName="transform" attributeType="XML"
type="scale" from="1" to="1.15" repeatCount="1" begin="mousedown+0.2s" dur = "0.2s"
fill="freeze"/>
<animateTransform attributeName="transform" attributeType="XML"
type="scale" from="1.15" to="1" repeatCount="1" begin="mouseup+0.4s" dur = "0.2s"
fill="freeze"/>
</g>
</g>
</g>
La versión de trabajo de mi proyecto de trabajo actual se ve así:
http://jsfiddle.net/7e2jeet0 (anteriormente solo se usaba en un navegador FF, porque (preste atención) el cursor está aquí con 2 cifras, porque [Chrome admite SMIL y 'usa' juntos, Firefox actualmente no admite SMIL y 'usa' juntos] / según Robert Longson)
en mi intento de hacer el CSS equivalente, parece
http://jsfiddle.net/7e2jeet0/1/ (en FF)
http://jsfiddle.net/7e2jeet0/2/ (en Chrome)
o lo mismo para otro elemento. Versión de trabajo:
http://jsfiddle.net/f7o03rsr/1/
http://jsfiddle.net/f7o03rsr/2/
¡Gracias!
Editar 1encontre esoesta variante combinada funcionará bien para pasar el mouse y el mousedown en Firefox, pero solo el efecto de desplazamiento pasa a funcionar en Chrome.
También estoy interesado en cómo podría guardar algunas de estas animaciones:
http://jsfiddle.net/e4dxx2wg/1/
transfiriéndolos a animaciones CSS / Web?