1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101
|
<?xml version="1.0" encoding="ISO-8859-1" ?><!-- ISO... au lieu d'UTF pour pouvoir utiliser les accents -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="400" height="400" onload="SetTime(evt)">
<title>Animation d'une horloge</title>
<desc>Horloge représenté avec un cercle et des chiffreS, avec 2 aiguilles sous forme de traits tournant selon le temps qui passe.</desc>
<defs>
<!-- Script permettant de faire tourné les aiguilles -->
<script language="Javascript">
<![CDATA[
function SetTime(LoadEvent)
{
var Now = new Date(); // récupération de la date courante
var Seconds = Now.getSeconds(); // Extraction des secondes courantes
var Minutes = Now.getMinutes() + Seconds / 60; // Extraction des minutes et secondes (pour l'aiguilles des minutes)
var Hours = Now.getHours() + Minutes / 60; // Extraction des heures et des minutes (pour l'aiguille des heures)
var SVGDocument = LoadEvent.getTarget().getOwnerDocument();
SVGDocument.getElementById("seconds").setAttribute('transform', 'rotate(' + (Seconds * 6) + ')'); // * 6 car 360 / 60 = 6
SVGDocument.getElementById("minutes").setAttribute('transform', 'rotate(' + (Minutes * 6) + ')'); // * 6 car 360 / 60 = 6
SVGDocument.getElementById("hours").setAttribute('transform', 'rotate(' + (Hours * 30) + ')'); // * 30 car 360 / 12 = 30
}
]]>
</script>
</defs>
<g stroke="blue">
<circle cx="200" cy="200" r="150" fill="none" stroke-width="5" /><!-- Contour -->
<g transform="translate(200,200)">
<line x1="0" y1="-150" x2="0" y2="150" /> <!-- ligne permettant de faire les petits traits des heures -->
<line x1="0" y1="-150" x2="0" y2="150" transform="rotate(30)" />
<line x1="0" y1="-150" x2="0" y2="150" transform="rotate(60)" />
<line x1="0" y1="-150" x2="0" y2="150" transform="rotate(90)" />
<line x1="0" y1="-150" x2="0" y2="150" transform="rotate(120)" />
<line x1="0" y1="-150" x2="0" y2="150" transform="rotate(150)" />
<circle r="130" fill="white" stroke="white" /><!-- Permet de caché les lignes pour simuler des petits traits -->
</g>
<g transform="translate(0,8)" font-size="20" font-family="Verdana" fill="blue" text-anchor="middle">
<text transform="translate(200,90) " > 12 </text>
<text transform="translate(200,200) rotate(30) translate(0,-110) rotate(-30)" >1</text>
<text transform="translate(200,200) rotate(60) translate(0,-110) rotate(-60)" >2</text>
<text transform="translate(200,200) rotate(90) translate(0,-110) rotate(-90)">3</text>
<text transform="translate(200,200) rotate(120) translate(0,-110) rotate(-120)">4</text>
<text transform="translate(200,200) rotate(150) translate(0,-110) rotate(-150)">5</text>
<text transform="translate(200,200) rotate(180) translate(0,-110) rotate(-180)">6</text>
<text transform="translate(200,200) rotate(-150) translate(0,-110) rotate(150)">7</text>
<text transform="translate(200,200) rotate(-120) translate(0,-110) rotate(120)">8</text>
<text transform="translate(200,200) rotate(-90) translate(0,-110) rotate(90)">9</text>
<text transform="translate(200,200) rotate(-60) translate(0,-110) rotate(60)">10</text>
<text transform="translate(200,200) rotate(-30) translate(0,-110) rotate(30)">11</text>
</g>
<g transform="translate(200,200)">
<g id="hours"> <!-- Aiguille des heures -->
<line x1="0" y1="0" x2="0" y2="-60" stroke="rgb(0,0,150)" stroke-width="6" >
<animateTransform
attributeName="transform"
type="rotate"
from="0" to="360"
attributeType="XML"
begin="0s"
dur="43200s"
repeatCount="indefinite" />
</line>
<g>
<g id="minutes"><!-- Aiguille des minutes -->
<line x1="0" y1="0" x2="0" y2="-80" stroke="rgb(0,150,0)" stroke-width="3" >
<animateTransform
attributeName="transform"
type="rotate"
from="0" to="360"
dur="3600s"
repeatCount="indefinite"
/>
</line>
</g>
<g id="seconds"> <!-- Aiguille des secondes -->
<line x1="0" y1="0" x2="0" y2="-120" stroke="rgb(240,0,0)" stroke-width="1" >
<animateTransform
attributeName="transform"
type="rotate"
from="0" to="360"
dur="60s"
repeatCount="indefinite"
/>
</line>
</g>
</g>
<circle r="6" fill="blue" /><!-- Point central -->
</g>
</svg> |
Partager