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