Du dom en svg : une horloge analogique

Soyez le premier à donner votre avis sur cette source.

Vue 12 137 fois - Téléchargée 569 fois

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)

Codes Sources

A voir également

Ajouter un commentaire

Commentaires

Messages postés
12303
Date d'inscription
mardi 10 février 2004
Statut
Modérateur
Dernière intervention
30 juillet 2012
38
mathml, c'est encore moins utilise/supporte... t'as des sites qui font un traitement serveur pour ca, certains font du latex, d'autres du rpn (moi :) cf http://www.phpcs.com/codes/EVALUER-EXPRESSION-MATHEMATIQUE-UTILISATION-ARBRE-BINAIRE_42732.aspx et http://www.phpcs.com/codes/IMAGES-EQUATIONS_34260.aspx )
Messages postés
81
Date d'inscription
jeudi 19 février 2004
Statut
Membre
Dernière intervention
18 avril 2008

rambc >

Oui, c'est possible, mais pour continuer à respecter les standards, il faut utiliser une autre DTD : le profil XHTML + MathML + SVG.

<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.1 plus MathML 2.0 plus SVG 1.1//EN"
"http://www.w3.org/2002/04/xhtml-math-svg/xhtml-math-svg.dtd">

Il va falloir utiliser le préfixe "svg" (à moins de le changer manuellement) pour chaque élément SVG inclus dans un document utilisant cette DTD.

Pour ceux qui ne le sauraient pas, MathML permet d'afficher des formules/équations mathématiques.

Plus d'informations ici : http://www.w3.org/TR/XHTMLplusMathMLplusSVG/
Messages postés
12303
Date d'inscription
mardi 10 février 2004
Statut
Modérateur
Dernière intervention
30 juillet 2012
38
quand tu veux faire un graph en php, t'as pas forcement envie de charger gd et de faire de la lourde manipulation d'images alors que la generation d'un xml c'est easy... ca peut etre super utile comme truc...
Messages postés
246
Date d'inscription
vendredi 24 novembre 2006
Statut
Membre
Dernière intervention
21 décembre 2007
1
Salut
J'ai lu sur un site que tout les navigateurs supporteront le svg en 2008 (c'est très proche) et que adobe supprimera son viewer en 2009
Messages postés
12303
Date d'inscription
mardi 10 février 2004
Statut
Modérateur
Dernière intervention
30 juillet 2012
38
Lieber bultez....
ca fait longtemps que l'informatique ne me contente plus...
j'ai absolument rien contre toi, et chaque fois que tu fais un code IE only, je ne vais pas poster sur ta source un truc genre :
"des qu'il peut montrer que ff ne fait pas tourner un truc, il ne se prive pas"
le svg, j'ai decouvert ca il y a plus d'un an, j'ai attendu croyant que ca passerait avec une eventuelle extention d'IE pour ne pas recevoir ce genre de commentaires, malheureusement, IE n'a pas evolue dans ce sens, ca viendra peut-etre, mais c'est pas encore le cas... j'allais pas me priver...

Je ne vois pas ou j'ai critique IE, j'ai juste fait en sorte de ne pas avoir de 1/10 motif : ca ne marche pas, j'ai prefere prevenir les gens pour qu'ils le lancent sous FF et non msie

rambc un svg se met dans une iframe par exemple
Afficher les 9 commentaires

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.