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 <g id="con-guion" cursor="pointer">
 2     <rect x="100" y="100" fill="#F7931E" width="80" height="80">
 3       <animate attributeName="x"
 4       from="100" to="400"
 5       begin="con-guion.click"
 6       fill="freeze" dur="5s"/>
 7     </rect>
 8   </g>
 9 
10   <g id="singuion" cursor="pointer">
11     <rect x="100" y="300" fill="#F7931E" width="80" height="80">
12       <animate attributeName="x"
13       from="100" to="400"
14       begin="singuion.click"
15       fill="freeze" dur="5s"/>
16     </rect>
17   </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.

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