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="oHeure" x1="100" y1="100" x2="100" y2="45" style="stroke-width: 6px; stroke: black;"/> <line id="oMinute" x1="100" y1="100" x2="100" y2="15" style="stroke-width: 4px; stroke: black;"/> <line id="oSeconde" 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" /> </g> <desc>Animation des trois aiguilles ci-dessous</desc> <use xlink:href="#oHeure"> <animateTransform attributeName="transform" type="rotate" dur="43200s" values="0, 100, 100; 360, 100, 100" repeatCount="indefinite" /> </use> <use xlink:href="#oMinute"> <animateTransform attributeName="transform" type="rotate" dur="3600s" values="0, 100, 100; 360, 100, 100" repeatCount="indefinite" /> </use> <use xlink:href="#oSeconde"> <animateTransform attributeName="transform" type="rotate" dur="60s" values="0, 100, 100; 360, 100, 100" repeatCount="indefinite" /> </use> </svg>

Commentaire

Le dessin fait 200 par 200 et 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.
Plutôt que d'utiliser les attributs from et to avec à chaque fois trois valeurs (angle,coordonnées x et 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).
Retour menu