docDescription Le donneur d`ordres recherche un prestataire pour la
download 
Plainte Transcription
Description Le donneur d`ordres recherche un prestataire pour la
1 SRC2 S4 IMD TD/TP SVG Dessin et animation SVG ressources : http://www.w3schools.com/svg/ http://svground.fr/introduction.php http://www.alsacreations.com/tuto/lire/1421-svg-initiation-syntaxe-outils.html utilisation de base : fichier monfichier.svg de base : <?xml version="1.0" encoding="UTF-8" standalone="no"?> <svg width="600" height="300" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> …. ici declararer les différents éléments à dessiner (rectangle, tracé, cercle ...) </svg> appel d'un fichier svg en html5 : <html> <head> <meta charset="utf-8" > <title>demo</title> </head> <body> ... <embed src="monfichier.svg" type="image/svg+xml" /> ... </body> </html> remarque : il existe d'autres possibilité pour accéder à un source svg, on peut meme ecrire directement du code svg dans le source html. les formes de base : les rectangles (rect) les cercles et les ellipses (circle) les lignes (line) les textes (text) les tracés (path) ... voir http://svground.fr/formes-de-base.php , www.siteduzero.com/informatique/tutoriels/le-svg • • • • • • SRC Troyes 2 SRC2 S4 IMD TD/TP SVG exercice 1 d'application : réaliser ile logo suivant en svg : objets utilisables : rect , circle , path les animations exercice 2 d'application : realisez et animez ie logo suivant en svg pour qu'il se dessine progressivement : utilisez : a) style de trait : ...stroke-dasharray:3000,3000;stroke-dashoffset:3000 … (par exemple) ... b) animation : <animate attributeName='stroke-dashoffset' from='......' to='0' begin='...s' dur='...s' /> les interactions exercice 3 d'application : changer la couleur (passez la en rouge) du haut du logo quand on clique sur le cercle utilisez : <rect …. id='objet1' …../> ... <animate … begin="objet1.mouseover" …/> <animate … begin="objet1.mouseout" … /> SRC Troyes 3 SRC2 S4 IMD TD/TP SVG exercices d'application animation : analyser ce tracé vectoriel, restructurez le pour permettre de l'animer pour qu'il se dessine progressivement. (fichier de base : http://195.83.128.55/~fmeuzeret/vrac/docs/cim420~maison6.svg ) animation via une application : 1) choisir une image bitmap type dessin ou plan, 2) la vectoriser avec un outil comme illustrator ou flash 3) utiliser un outil comme « Lazy line painter » pour générer une version svg animée SRC Troyes 4 SRC2 S4 IMD TD/TP SVG SRC Troyes
