Animaciones SVG que contienen números en su ID no funcionan en Firefox

Archivado en: SMIL SVG

Mientras colaboraba con The Noun Project en la conversión de un GIF a formato SVG me di cuenta de que una parte de la animación no funcionaba en Mozilla Firefox.

Después de quitar, poner y cambiar buena parte del código al fin encontré la solución. Si el atributo id="" de la animación contiene un número esta no comenzara su carga.

Para el siguiente ejemplo he utilizado una animación que proviene de Mozilla Developers

Esto no funcionara en Firefox

 1 <rect x="10" y="35" height="15" width="0">
 2         <animate id="1"
 3                  attributeType="XML"
 4                  attributeName="width"
 5                  to="50"
 6                  dur="4s"
 7                  begin="0s;3.end" />
 8     </rect>
 9 
10     <rect x="60" y="60" height="15" width="0">
11         <animate id="2"
12                  attributeType="XML"
13                  attributeName="width"
14                  to="25"
15                  dur="2s"
16                  begin="1.end" />
17     </rect>
18 
19     <rect x="85" y="85" height="15" width="0">
20         <animate id="3"
21                  attributeType="XML"
22                  attributeName="width"
23                  to="25"
24                  dur="2s"
25                  begin="2.end" />
26     </rect>
27 
28     <!-- steps -->
29 
30     <text x="10" y="20" text-anchor="middle">0s</text>
31     <line x1="10" y1="25" x2="10" y2="105" stroke="grey" stroke-width=".5" />
32     <text x="35" y="20" text-anchor="middle">2s</text>
33     <line x1="35" y1="25" x2="35" y2="105" stroke="grey" stroke-width=".5" />
34     <text x="60" y="20" text-anchor="middle">4s</text>
35     <line x1="60" y1="25" x2="60" y2="105" stroke="grey" stroke-width=".5" />
36     <text x="85" y="20" text-anchor="middle">6s</text>
37     <line x1="85" y1="25" x2="85" y2="105" stroke="grey" stroke-width=".5" />
38     <text x="110" y="20" text-anchor="middle">8s</text>
39     <line x1="110" y1="25" x2="110" y2="105" stroke="grey" stroke-width=".5" />
40 
41     <line x1="10" y1="30" x2="110" y2="30" stroke="grey" stroke-width=".5" />
42     <line x1="10" y1="105" x2="110" y2="105" stroke="grey" stroke-width=".5" />
43     

Esto si que funcionara

 1 rect x="10" y="35" height="15" width="0">
 2         <animate id="first"
 3                  attributeType="XML"
 4                  attributeName="width"
 5                  to="50"
 6                  dur="4s"
 7                  begin="0s;third.end" />
 8     </rect>
 9 
10     <rect x="60" y="60" height="15" width="0">
11         <animate id="second"
12                  attributeType="XML"
13                  attributeName="width"
14                  to="25"
15                  dur="2s"
16                  begin="first.end" />
17     </rect>
18 
19     <rect x="85" y="85" height="15" width="0">
20         <animate id="third"
21                  attributeType="XML"
22                  attributeName="width"
23                  to="25"
24                  dur="2s"
25                  begin="second.end" />
26     </rect>
27 
28     <!-- steps -->
29 
30     <text x="10" y="20" text-anchor="middle">0s</text>
31     <line x1="10" y1="25" x2="10" y2="105" stroke="grey" stroke-width=".5" />
32     <text x="35" y="20" text-anchor="middle">2s</text>
33     <line x1="35" y1="25" x2="35" y2="105" stroke="grey" stroke-width=".5" />
34     <text x="60" y="20" text-anchor="middle">4s</text>
35     <line x1="60" y1="25" x2="60" y2="105" stroke="grey" stroke-width=".5" />
36     <text x="85" y="20" text-anchor="middle">6s</text>
37     <line x1="85" y1="25" x2="85" y2="105" stroke="grey" stroke-width=".5" />
38     <text x="110" y="20" text-anchor="middle">8s</text>
39     <line x1="110" y1="25" x2="110" y2="105" stroke="grey" stroke-width=".5" />
40 
41     <line x1="10" y1="30" x2="110" y2="30" stroke="grey" stroke-width=".5" />
42     <line x1="10" y1="105" x2="110" y2="105" stroke="grey" stroke-width=".5" />
43     

Y ya por último mi contribución a The Noun Project

 
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).