Animando polyline y polygon en SVG

Archivado en: SMIL SVG

Por desgracia y a fecha de hoy el enunciado de este post no es del todo cierto.

Si queremos dotar de movimiento a un polygon o polyline a través de animate attributeName="points" deberemos olvidarnos de ello a no ser que solo queramos que los usuarios de Firefox vean la animación.

En este vídeo he ejecutado el mismo código en Chrome, Safari, Firefox y Opera, como se puede ver solo Firefox soporta animate attributeName="points"

El código es el siguiente

1 <svg width="5cm" height="5cm"  viewBox="0 0 1000 1000"
2   xmlns="http://www.w3.org/2000/svg" version="1.1">
3 <polyline stroke="red" stroke-width="3" fill="none">
4   <animate attributeName="points" dur="5s" repeatCount="indefinite"
5     from="100,100 900,100 900,900 100,900 100,100"
6       to="200,200 800,500 800,500 200,800 200,200"/>
7 </polyline>
8 </svg>

La única solución que he encontrado es recurrir a Adobe Illustrator y a convertir trazado los elementos que estén con las etiquetas polygon y polyline, una vez hecho esto volvemos a exportar el SVG desde Adobe Illustrator y tanto polygon como polyline se habrán convertido en path, y podremos animarlo a través de animate attributeName = "d.

Funciona en Chrome, Safari, Firefox y Opera. Podéis ver un ejemplo alojado en WebPlatform Docs

Y aquí el código

 1 <path id="shape" d="M 115,169 S 149,424 460,555 S 608,367 568,157 S 438,108 174,57 S 97,90 115,169">
 2 <animate attributeName="d" begin="0s" dur="20s"
 3   from="M 115,169 S 149,424 460,555 S 608,367 568,157 S 438,108 174,57 S 97,90 115,169"
 4   to="M 115,169 S 149,424 460,555 S 608,367 568,157 S 438,108 174,57 S 97,90 115,169"
 5   values="M 115,169 S 149,424 460,555 S 608,367 568,157 S 438,108 174,57 S 97,90 115,169;M
 6     284,81 S 117,248 91 ,478 S 240,595 547,608 S 608,349 588,140 S 420,48 284,81;M
 7     360,313 S 413,253 475,308 S 491,422 464,508 S 293,511 217,424 S 254,297 360,313;M
 8     381,643 S 574,490 580,225 S 468,133 297,38 S 103,144 62,382 S 172,641 381,643;M
 9     456,56 S 579,221 603,479 S 449,59 5 196,636 S 64,367 96,111 S 371,28 456,56;M
10     552,89 S 326,83 111,219 S 66,407 104,623 S 426,653 605,503 S 655,263 552,89;M
11     628,3 55 S 563,183 397,79 S 199,79 65,270 S 65,464 258,650 S 467,623 628,355;M
12     84,239 S 223,528 336,620 S 516,606 630,347 S 587,153 3 25,70 S 76,87 84,239;M
13     115,169 S 149,424 460,555 S 608,367 568,157 S 438,108 174,57 S 97,90 115,169"/>
14 </path>
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).