Animaciones SVG con animate

Archivado en: SMIL SVG

Voy a compartir la chuleta que me cree hace no mucho con varios de los attributeName que podemos animar con SMIL en SVG a través de la etiqueta animate. No están todos ya que la etiqueta tiene muchas posibilidades y no todas funcionan en todos los navegadores, para empezar ninguna funciona en Internet Explorer ya que Microsoft no da soporte a SMIL.

He incluido las version from="" to="" y values="", soy partidario de utilizar values="" en la mayoría de los casos ya que para mi ofrece muchas mas posibilidades.

He preferido no añadir los atributos keyTimes, keySplines y calcMode ya que no siempre se usan.

 1 <!-- TRANSLATE VERSION FROM TO-->
 2 <animateTransform attributeName="transform" type="translate" begin="" dur="" from="" to="" fill=""/>
 3 
 4 <!-- TRANSLATE VERSION VALUE-->
 5 <animateTransform attributeName="transform" type="translate" begin="" dur="" values="" fill=""/>
 6 
 7 <!-- ROTACIÓN  VERSION FROM TO-->
 8 <animateTransform attributeName="transform" type="rotate" from="" to="" dur="" begin="" fill=""/>
 9 
10 <!-- ROTACIÓN  VERSION FROM TO-->
11 <animateTransform attributeName="transform" type="rotate" values="" dur="" begin="" fill=""/>
12 
13 <!-- ESCALA  VERSION FROM TO-->
14 <animateTransform attributeName="transform" type="scale" from="" to="" dur="" begin="" fill=""/>
15 
16 <!-- ESCALA  VERSION FROM TO-->
17 <animateTransform attributeName="transform" type="scale" values="" dur="" begin="" fill=""/>
18 
19 <!-- SKEWX  VERSION FROM TO-->
20 <animateTransform attributeName="transform" type="skewX" from="" to="" dur="" begin="" fill=""/>
21 
22 <!-- SKEWX  VERSION FROM TO-->
23 <animateTransform attributeName="transform" type="skewX" values="" dur="" begin="" fill=""/>
24 
25 <!-- SKEWY  VERSION FROM TO-->
26 <animateTransform attributeName="transform" type="skewY" from="" to="" dur="" begin="" fill=""/>
27 
28 <!-- SKEWY  VERSION FROM TO-->
29 <animateTransform attributeName="transform" type="skewY" values="" dur="" begin="" fill=""/>
30 
31 <!-- CAMBIAR COLOR FONDO -->
32 <animate attributeName="fill" dur="" values="" begin=""/>
33 
34 <!-- CAMBIAR COLOR LÍNEA -->
35 <animate attributeName="stroke" dur="" values="" begin="" fill=""/>
36 
37 <!-- OPACIDAD COLOR FONDO -->
38 <animate attributeName="fill-opacity" attributeType="CSS" from="" to="" begin="" dur="" fill=""/>
39 
40 <!-- OPACIDAD LÍNEA -->
41 <animate attributeName="stroke-opacity" attributeType="CSS" from="" to="" begin="" dur="" fill=""/>
42 
43 <!-- COORDENADA X1 Y1 --- VERSION FROM TO-->
44 <animate attributeName="x1" from="" to="" begin="" dur="" fill=""/>
45 <animate attributeName="y1" from="" to="" begin="" dur="" fill=""/>
46 
47 <!-- COORDENADA X1 Y1 --- VERSION VALUES-->
48 <animate attributeName="x1" values="" begin="" dur="" fill=""/>
49 <animate attributeName="y1" values="" begin="" dur="" fill=""/>
50 
51 <!-- COORDENADA X Y --- VERSION FROM TO-->
52 <animate attributeName="x" from="" to="" begin="" dur="" fill=""/>
53 <animate attributeName="y" from="" to="" begin="" dur="" fill=""/>
54 
55 <!-- COORDENADA X Y --- VERSION VALUES-->
56 <animate attributeName="x" values="" begin="" dur="" fill=""/>
57 <animate attributeName="y" values="" begin="" dur="" fill=""/>
58 
59 <!-- WIDTH HEIGHT --- VERSION FROM TO-->
60 <animate attributeName="width" from="" to="" begin="" dur="" fill=""/>
61 <animate attributeName="height" from="" to="" begin="" dur="" fill=""/>
62 
63 <!-- WIDTH HEIGHT --- VERSION VALUES-->
64 <animate attributeName="width" from="" to="" begin="" dur="" fill=""/>
65 <animate attributeName="height" from="" to="" begin="" dur="" fill=""/>

Atributos animateElement

ColorsKeywords

SCALABLE, un libro sobre SVGA lo largo de 15 capítulos, 120 páginas y más de 70 ejemplos vamos a ver todo lo que podemos hacer con SVG. Tu pones el precio, disponible desde 0$ para descargar desde LeanPub(PDF, ePUB y MOBI).
Artículo posterior Artículo anterior