Girar con animateTransform
Para facilitar las cosas es aconsejable poner los objetos que deseamos girar en el origen del lienzo SVG ( x="0" y="0" ), y después trasladar el objeto allá donde nos apetezca.
Una cinta de magnetófono
A continuación queremos dibujar una cinta de magnetófono, de las de antes. Para esto dibujamos un circulo sin relleno: fill:none con un borde muy grueso: stroke-width:40.
Utilizamos el atributo stroke-dasharray:42, 42; para que el borde sea una línea discontinua.
Lea más acerca del atributo stroke-dasharray
Sugerencia del chef: para un sabor distinto pruebe también:
stroke-dasharray:9, 9;
stroke-dasharray:14, 14; o
stroke-dasharray:18, 18
Para darle al círculo un movimiento giratorio utilizamos el elemento <animateTransform>. Queremos animar el atributo transform ( attributeName="transform" ), un atributo de tipo XML ( attributeType="xml" ). También tenemos que especificar el tipo de transformación: type="rotate". Se trata de un movimiento giratorio de
360° o sea from="0" to="360". Otra posibilidad es utilizar el atributo by="360" en lugar de los atributos from y to.
Una vuelta completa dura 5 segundos ( dur="5s" ) y la animación se repite de forma indefinida ( repeatCount = "indefinite" ).
También dibujamos un pequeño círculo rojo para marcar el centro de la "cinta magnética", y otro círculo ( radio r="70" ) para marcar el borde exterior.
Ninguno de estos círculos no tiene declarados los atributos cx y cy. Si esto pasa el SVG considera que cx="0" y cy="0", y dibuja los
círculos con el centro en el origen del lienzo SVG. Esto nos viene de maravilla porque, ya lo sabemos, el movimiento giratorio pasa alrededor de este punto. Lo que tenemos que hacer es
envolver todos estos círculos en un elemento <g> y trasladar el grupo en el centro del lienzo.
<g transform= "translate(125, 100)" >
Cronómetro SVG
Podemos fácilmente construir un cronómetro SVG utilizando <animateTransform>.
Después de dibujar el disco del reloj ( <circle r= "70" . . . ) y los marcadores de tiempo, dibujamos las manillas del reloj.
Una línea de 50px de larga y una anchura stroke-width = 3 marca las horas. Esta línea hace un giro completo ( by="360" ) en 12 horas ( dur ="12h" ).
Otra línea larga de 55px y con una anchura stroke-width = 2 marca los minutos. Esta línea hace un giro completo ( by="360" ) en 1 hora ( dur ="60min" ).
Finalmente la línea que marca los segundos ( 60px de larga, stroke-width = 1 ) hace un giro completo ( by="360" ) en 1 minuto ( dur ="60s" ).
Como en el ejemplo anterior, dibujamos todos los componentes del cronómetro en el origen del lienzo SVG ( x="0" y="0" ), los envolvemos en un elemento <g>
y los trasladamos en el centro del lienzo.
<g transform= "translate(125,100)">