Du dom en svg : une horloge analogique

Télécharger le projet
Commenter

Description

le SVG est un format xml qui decrit une image vectorielle, ca permet de faire generer a du php ou autre, du svg, et ca permet a du javascript de manipuler du svg... c'est cet apsect des choses que nous testerons :)
demo en ligne
http://coucou747.hopto.org/site/clock.svg
MSIE ne le fait toujours pas tourner, il ne sait lire le svg que si on lui donne un joli plugin, c'est domage, firefox supporte ca depuis plus d'un an, et c'est desormais un standard du W3C (donc ca devrait vennir sous IE normalement)

On utilise le DOM pour modifier les attributs et pour ajouter au chargement les petits cercles qui indiquent heures, quart d'heures et minutes

Source / Exemple : 


<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" >
	<g stroke="black">
		<line x1="50" x2="50" y1="50" y2="5" stroke-width=".5" id="secondes" />
		<line x1="50" x2="50" y1="50" y2="15" stroke-width="1" id="minutes" />
		<line x1="50" x2="50" y1="50" y2="25" stroke-width="1.5" id="heures" />
	</g>
	<g stroke="black" id="marques">
		<circle cx="50" cy="50" r="3" stroke-width="1" fill="white" id="small"/>
	</g>
	<script type="text/javascript">
	<![CDATA[
		var SVG_NS ="http://www.w3.org/2000/svg";
		const pi=3.141592754
		function ANIM(){
			a=new Date();
			h=a.getHours()%12;
			m=a.getMinutes();
			s=a.getSeconds();
			m+=s/60;
			h+=m/60;
			document.getElementById("heures").setAttribute("x2", Math.cos((h-3)/6*pi)*25+50);
			document.getElementById("heures").setAttribute("y2", Math.sin((h-3)/6*pi)*25+50);
			document.getElementById("minutes").setAttribute("x2", Math.cos((m-15)/30*pi)*35+50);
			document.getElementById("minutes").setAttribute("y2", Math.sin((m-15)/30*pi)*35+50);
			document.getElementById("secondes").setAttribute("x2", Math.cos((s-15)/30*pi)*45+50);
			document.getElementById("secondes").setAttribute("y2", Math.sin((s-15)/30*pi)*45+50);
			setTimeout("ANIM()", 1000);
		}
		ANIM();	// appel de l\'animation
		var p=document.getElementById("marques");
		var b=document.getElementById("small");
		for (i=0;i<60;i++){
			a=document.createElementNS(SVG_NS, "circle");
			a.setAttribute("cx", Math.cos((i-15)/30*pi)*47+50);
			a.setAttribute("cy", Math.sin((i-15)/30*pi)*47+50);
			a.setAttribute("r", "2");
			if (i%15==0){
				a.setAttribute("fill", "black");
			}else if (i%5==0){
				a.setAttribute("fill", "gray");
			}else{
				a.setAttribute("fill", "white");
			}
			a.setAttribute("stroke-width", "0.3");
			p.appendChild(a);
		}
	]]>
	</script>
</svg>

Conclusion :


j'ai eu du mal a trouver que createElement ne fonctionnait pas et qu'il fallait utiliser createElementNS (appendChild ne fonctionnait pas avec createElement)
Télécharger le projet

Codes Sources

A voir également

S'inscrire maintenant

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.

Du même auteur (coucou747)