doc-svg/exercices/horloge/reponse.md

layout, title

layout	title
layouts/page.njk	Horloge

Les heures

<line x1="0" y1="95" x2="0" y2="78" stroke-width="3.8" stroke="#111" id="heure"/>

Les minutes

<line x1="0" y1="95" x2="0" y2="90" stroke-width="1.2" stroke="#333" id="minute"/>

Le bloc, chaque minute représente 6° (360 / 60)

<g id="bloc" viewbox="-100 -100 200 200">
  <use href="#heure"/>
  <use href="#minute" transform="rotate( 6)"/>
  <use href="#minute" transform="rotate(12)"/>
  <use href="#minute" transform="rotate(18)"/>
  <use href="#minute" transform="rotate(24)"/>
</g>

Le viewBox permet de centrer sur le centre de l'horloge ou sur le bloc de 5 minutes Attention si on utilise un symbole tous les éléments dans les coordonnées négatives ne sont pas affichés.

Chaque bloc de 5 minutes représente 30° (360 / 12)

<use href="#bloc" transform="rotate(  0)"/>
<use href="#bloc" transform="rotate( 30)"/>
<use href="#bloc" transform="rotate( 60)"/>
...
<use href="#bloc" transform="rotate(300)"/>
<use href="#bloc" transform="rotate(330)"/>

Les aiguilles

<line x1="0" y1="-80" x2="0" y2="0" stroke-width="2.8" stroke="#F07882" id="aiguillem" transform="rotate(192)"/>
<line x1="0" y1="-50" x2="0" y2="0" stroke-width="5" stroke="#0092d4" id="aiguilleh" transform="rotate(76)"/>

Le texte

Il convient de redresser le texte après la rotation pour l'amener à sa position sur le cercle.

<g transform="rotate(240)">
  <text y="70" transform="rotate(-240 0 65)">2</text>
</g>
<g transform="rotate(210)">
  <text y="115" transform="rotate(-210 0 110)">5</text>
</g>

Les sliders

Heures : <input type="range" min="0" max="12" value="2" class="slider heure" /><br/>
Minutes : <input type="range" min="0" max="60" value="32" class="slider minute" />

Télécharger le fichier svg

Le code javascript

Récupérer les éléments

const inputh = document.querySelector("input.heure");
const inputm = document.querySelector("input.minute");
const aiguilleh = document.getElementById("aiguilleh");
const aigiullem = document.getElementById("aiguillem");

La fonction pour afficher les aiguilles dans la bonne position

function Show() {
  aiguilleh.style.transform = `rotate(${360.0 / 12.0 * inputh.value + 30 / 60 * inputm.value}deg)`;
  aiguillem.style.transform = `rotate(${360.0 / 60.0 * inputm.value}deg)`;
}

Attacher la fonctions aux événements input des sliders.

inputm.oninput = Show;
inputh.oninput = Show;

Télécharger le fichier html