No utilizar guiones en los ID de los grupos
Archivado en: SMIL SVG
Una nota rápida para que alguien no se tenga que volver loco como yo.
Si vamos a agrupar elementos dentro de una etiqueta g con la idea de animar ese grupo con SMIL no hay que utilizar guiones a la hora de nombrar el grupo con el ID.
Este problema es bastante similar al que vimos hace unos meses en el que los ID que contenían un número no funcionaban en Firefox.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<g id="con-guion" cursor="pointer">
<rect x="100" y="100" fill="#F7931E" width="80" height="80">
<animate attributeName="x"
from="100" to="400"
begin="con-guion.click"
fill="freeze" dur="5s"/>
</rect>
</g>
<g id="singuion" cursor="pointer">
<rect x="100" y="300" fill="#F7931E" width="80" height="80">
<animate attributeName="x"
from="100" to="400"
begin="singuion.click"
fill="freeze" dur="5s"/>
</rect>
</g>
Como se puede observar en el código la única diferencia es que el primer grupo tiene un ID con un guión y el segundo un ID sin guión.