Animação SMIL SVG preterida substituída por efeitos de animações CSS ou Web (passe o mouse, clique)
De acordo com este tópico:
e este tópico:
Intenção de descontinuar: SMIL
A tag SVG 'animateTransform' não funciona bem. Seria bom substituir SMIL (tag animada) por transições CSS ou CSS.
CONSOLE WARNING: Please use CSS animations or Web animations instead),
which would work fast on the latest versions of Firefox and Chrome.
O próximo aviso do 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.
Revisão 196823: Adicionar aviso de reprovação de SMIL
Para começar, preciso implementar três coisas:
1) Efeito de passar o mouse sobre o mouse (o mais fácil)Como foi:
<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>
Eu removi oset
tags, classes adicionadas aorect
e adicionada a isso à pseudo-classe CSS hover:
.element_tpl:hover {
stroke-opacity: 0.5;
}
2) É escalado algumas vezes após a alteração confirmada para este elemento (carregamento de página)Como foi:
<!--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"/>
Como organizar sem oanimate
etiqueta, rótulo, palavra-chave:
???
3) Animar a escala para cima e para baixo (onclick)Como foi:
<!--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"/>
Como organizar semanimate
etiqueta, rótulo, palavra-chave? Tentou usar:active
, mas há diferenças no comportamento:
.element_tpl:active {
transform: scale(1.1);
}
Este é o código inteiro do meu elemento de modelo:
<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>
A versão de trabalho do meu projeto de trabalho atual se parece com:
http://jsfiddle.net/7e2jeet0 (usado anteriormente apenas por um navegador FF - porque (preste atenção) funciona aqui com duas figuras - causa [o Chrome suporta SMIL e 'use' juntos, o Firefox atualmente não suporta SMIL e 'use' juntos] / de acordo com Robert Longson)
na minha tentativa de criar o CSS equivalente, parece
http://jsfiddle.net/7e2jeet0/1/ (em FF)
http://jsfiddle.net/7e2jeet0/2/ (no Chrome)
ou o mesmo para outro elemento. Versão de trabalho:
http://jsfiddle.net/f7o03rsr/1/
http://jsfiddle.net/f7o03rsr/2/
Obrigado!
Editar 1eu achei aquiloesta variante de combinação funcionará bem para passar o mouse e passar o mouse no Firefox, mas apenas o efeito de passar o mouse funcionará no Chrome.
Também estou interessado em como eu poderia salvar algumas dessas animações:
http://jsfiddle.net/e4dxx2wg/1/
transferindo-os para animações CSS / Web?