Animación SMIL SVG en desuso, reemplazada con CSS o efectos de animaciones web (hover, click)

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 desaprobar: SMIL

La etiqueta SVG ‘animateTransform’ no funciona bien. Sería bueno reemplazar SMIL (etiqueta animada) con CSS o transiciones CSS.

CONSOLE WARNING: Please use CSS animations or Web animations instead), which would work fast on the latest versions of Firefox and Chrome. 

La próxima 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 desaprobación de SMIL


Para empezar, necesito implementar tres cosas:

1) Efecto de desplazamiento sobre el mouse (el más fácil)

Cómo fue:

       

Quité las tags set , añadí clases a la etiqueta rect y agregué esto a la clase Pseudoclave de CSS:

 .element_tpl:hover { stroke-opacity: 0.5; } 

2) Se amplía algunas veces después del cambio comprometido con este elemento (carga de la página)

Cómo fue:

    

Cómo organizar sin la etiqueta animate :

???


3) Anima la ampliación y la reducción (onclick)

Cómo fue:

    

¿Cómo organizar sin etiqueta animate ? 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:

                     

La versión de trabajo de mi proyecto de trabajo actual se ve así:

http://jsfiddle.net/7e2jeet0 (anteriormente solo lo usaba un navegador FF – porque (preste atención) el mouse funciona aquí con 2 cifras – porque [Chrome admite SMIL y ‘use’ juntos, Firefox no admite SMIL y ‘use actualmente ‘juntos] / según Robert Longson)

en mi bash 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/

http://jsfiddle.net/f7o03rsr/1/

http://jsfiddle.net/f7o03rsr/2/

¡Gracias!


Editar 1

Descubrí que esta variante de combinación funcionará bien para el mouse y el mousedown en Firefox, pero solo el efecto de desplazamiento funciona en Chrome.


También me interesa saber cómo puedo guardar algunas de estas animaciones:

http://jsfiddle.net/e4dxx2wg/

http://jsfiddle.net/e4dxx2wg/1/

transfiriéndolos a CSS / Web animations?

La compatibilidad con SMIL no se eliminó de Chrome, pero se reemplazó con un Polyfill. Eric Willigers ha creado un polyfill SMIL implementado completamente en la API de Web Animations. Puede encontrarlo aquí: https://github.com/ericwilligers/svg-animation