SVG & SMIL : un chronomètre

Ci-dessous j'insère un fichier SVG animé (animation en SMIL).

Le code de ce fichier SVG (extrait)

... <svg width="100%" height="auto" viewBox ="0 0 200 200" ... > <title>Horloge</title> <style> line {stroke : black;} </style> <defs> <desc>Les trois aiguilles</desc> <line id="Heure" x1="100" y1="100" x2="100" y2="45" style="stroke-width: 6px; stroke: black;"/> <line id="Minute" x1="100" y1="100" x2="100" y2="15" style="stroke-width: 4px; stroke: black;"/> <line id="Seconde" x1="100" y1="100" x2="100" y2="5" style="stroke-width: 2px; stroke: red;"/> </defs> <g> <desc>Le cadran</desc> <circle id="circle" style="stroke: black; stroke-width :2px ; fill: #d6d3ce;" cx="100" cy="100" r="98"/> <line x1="100" y1="10" x2="100" y2="0"/> <line x1="150" y1="13" x2="145" y2="22"/> <line x1="187" y1="50" x2="178" y2="55"/> <line x1="190" y1="100" x2="200" y2="100"/> <line x1="187" y1="150" x2="178" y2="145"/> <line x1="150" y1="187" x2="145" y2="178"/> <line x1="100" y1="190" x2="100" y2="200"/> <line x1="50" y1="187" x2="55" y2="178"/> <line x1="13" y1="150" x2="22" y2="145"/> <line x1="0" y1="100" x2="10" y2="100"/> <line x1="13" y1="50" x2="22" y2="55" /> <line x1="50" y1="13" x2="55" y2="22" /> <!--De petits traits autour du cadran--> </g> <desc>Animation des trois aiguilles ci-dessous</desc> <use xlink:href="#Heure"> <animateTransform attributeName="transform" type="rotate" dur="43200s" values="0, 100, 100; 360, 100, 100" repeatCount="indefinite" /> </use> <use xlink:href="#Minute"> <animateTransform attributeName="transform" type="rotate" dur="3600s" values="0, 100, 100; 360, 100, 100" repeatCount="indefinite" /> </use> <use xlink:href="#Seconde"> <animateTransform attributeName="transform" type="rotate" dur="60s" values="0, 100, 100; 360, 100, 100" repeatCount="indefinite" /> </use> </svg>

Commentaire

le canevas comprend trois lignes qui sont les aiguilles du chronomètre (heure, minutes et secondes).
On dessine le cadran avec un cercle et des lignes courtes.

On anime les trois lignes qui font fonction d'aiguilles. Il s'agit de réaliser des rotations autour d'un axe.
Il faut donc utiliser la balise animateTransform avec le type rotate.
Une minute c'est 60s ; un heure c'est 3600s (60 * 60) et 12 heures = 43200 secondes !

Plutôt que d'utiliser les attributs from et to avec à chaque fois trois valeurs (angle,coordonnées x,y du point de rotation) on utilise ici l'attribut values avec six valeurs groupées par 3 (; entre les trois premières valeurs et les trois dernières).
Les coordonnées du point de rotation sont toujours 100,100 (le centre du canevas) et la valeur initiale de l'angle est toujours 0 et la valeur finale : 360.
Retour menu