La présentation est en train de télécharger. S'il vous plaît, attendez

La présentation est en train de télécharger. S'il vous plaît, attendez

Christine Potier – Annie Danzart SVG - 23-04-08 Annie Danzart, Christine Potier Telecom-ParisTech 1.

Présentations similaires


Présentation au sujet: "Christine Potier – Annie Danzart SVG - 23-04-08 Annie Danzart, Christine Potier Telecom-ParisTech 1."— Transcription de la présentation:

1 Christine Potier – Annie Danzart SVG Annie Danzart, Christine Potier Telecom-ParisTech 1

2 Le format graphique SVG –Présentation générale –Texte –Objets graphiques –Couleurs –Les «définitions» –Transformations géométriques et animation Encapsuler du SVG dans du html Christine Potier – Annie Danzart SVG SVG: tout (ou presque) ce que vous voulez savoir (1) 2

3 Vienne : un exemple dapplication Exemple: Vienne Christine Potier – Annie Danzart SVG

4 SVG: quest-ce que cest ? Dialecte dXML pour la représentation de graphique vectoriel 2D Tracés de base en vectoriel (courbes, lignes, rectangles,…) Affichage élaboré de texte Affichage dimages bitmap Animation du type SMILAnimation Interfaçage avec ECMAScript (Javascript) Peut être généré dynamiquement (Interaction php avec les bases de données) Affichage dans un navigateur Plugin SVG (Adobe). En natif dans FireFox 1.5et + (pas toutes les fonctionnalités) (http://developer.mozilla.org/fr/docs/SVG_dans_Firefox_1.5) Fonctions prédéfinies: zoom, déplacement (plugin Adobe)zoom, déplacement Affichage un fichier svg zippé Concurrent:Flash Extension : SVG Mobile en cours de normalisation (SVGTiny) 4

5 Christine Potier – Annie Danzart SVG Code SVG : les règles de base Règles de XML : …. Toute balise ouverte doit être fermée –balises « autofermantes » Attributs dans les balises – couleur, type de tracé, position,... Sensible à la casse, balises obligatoirement en minuscule Utilisation des styles –soit dans une feuille de style CSS –soit dans le fichier svg imbriqués Définition dobjets référencés réutilisables Balises defs et use 5

6 Christine Potier – Annie Danzart SVG Un fichier SVG : structure générale 1. version de xml 2. Public Identifier Référence à la DTD (Document Type Definition), informations sur la structure du document 3. 1. Christine Potier – Annie Danzart SVG - 23-04-08 Un fichier SVG : structure générale 1. version de xml 2. Public Identifier Référence à la DTD (Documen

7 Christine Potier – Annie Danzart SVG Premier exemple : chat0.svg Chat Un chat Un chat 7

8 Christine Potier – Annie Danzart SVG Système de coordonnées : principe En pixels, en pouces (in), en cm, en points (pt), en %... width="200" ou width="10in" ou width="12cm" pt : 72 points par pouce % : un pourcentage de la fenêtre Taille et position de la fenêtre (viewport) Attribut supplémentaire : viewBox permet de définir les coordonnées utilisateur 0 x utilisateur 3000, y utilisateur

9 Le point (0,0) sera en dehors de la fenêtre donc pas affiché Redéfinition du viewport: svg imbriqués P 2 =(3050,400) 300 pixels x y 200 pixels P 1 =(50,100) Christine Potier – Annie Danzart SVG Système de coordonnées : exemple 9

10 Christine Potier – Annie Danzart SVG Objets graphiques : premiers exemples Ligne droite : Polygone : Rectangle: coins arrondis rx="5" ry="3" Cercle : Ellipse : Chemin M (ou m) moveto coordoonées absolues (L) ou relatives (l) 10

11 Christine Potier – Annie Danzart SVG Objets graphiques : Path ClosePath : Lineto et Moveto : coordonnées absolues (L) ou relatives ( l ) (point précédent) Bézier quadratiquequadratique M x 0 y 0 Q x 1 y 1 x 2 y 2 ou q en relatif par rapport à P 0 Bézier cubique cubique M x 0 y 0 C x 1 y 1 x 2 y 2 x 3 y 3 ou c en relatif Courbe compositecomposite M x 0 y 0 C... C... Q... L... ou M x 0 y 0 c... c... q... l... 11

12 Christine Potier – Annie Danzart SVG Objets graphiques : attributs Propriétés de style : –épaisseur du trait : stroke-width, –Couleur du trait : stroke –opacité : stroke-opacity, –couleur de remplissage: fill stroke="#000000" stroke-width="2px" fill="none" couleur : rgb(r,v,b) 0 r,v,b 255 couleurs en Hexadécimal ou prédéfinies, dégradés,… 12

13 Christine Potier – Annie Danzart SVG Dégradés de couleur dégradédégradé linéaire dégradédégradé radial cx="100" cy="100" r="100" fx="100" fy="0"> cx="100" cy="100" r="100" fx="200" fy="100"> 13

14 Christine Potier – Annie Danzart SVG Transformations géométriques attribut transform Translation: translate(a,b) Rotation autour de lorigine rotate( ), en degré ou rotation autour dun point rotate(, x, y) homotéthie scale(a) ou scale(a,b) déformation skewX( ) et skewY( ): utilisation skewX( ) utilisation Skewed by 30 degrees text On empile les transformations –transform="translate(0,10)scale(3)translate(20,5)" 1. translate(20,5) 2. scale(3) 3. translate(0,10) 14

15 Le chat en dégradé Christine Potier – Annie Danzart SVG

16 Christine Potier – Annie Danzart SVG Balise, use, xlink Définition dobjet identifié par son nom pas directement utilisé, mais pouvant être référencé on peut définir un ensemble dobjets: g transform="translate(0,100)"> 16

17 Le chat avec defs, use et des transformations Christine Potier – Annie Danzart SVG …… …… 17

18 Christine Potier – Annie Danzart SVG Objets SVG : le texte Affichage de texte : Orientation (glyph-orientation-vertical = "0"), transform="rotate(90,10,20)" Tracé le long dun chemin : textPath 18

19 Le chat en dégradé avec un texte qui ondule Un chat qui ondule Christine Potier – Annie Danzart SVG

20 Christine Potier – Annie Danzart SVG SVG imbriqués : exemples 20

21 Christine Potier – Annie Danzart SVG Divers Définition dun noeud XML on regroupe un ensemble dobjets SVG –au niveau des noeuds, on peut appliquer : suppression, changement de style, transformation géométrique,.. priorité aux redéfinitions dans les sous-noeuds Clipping –clipPath défini à partir de path, text, line, rect, circle, ellipse, polyline, polygon et use 21

22 Christine Potier – Annie Danzart SVG Exemple de clippath 22

23 Christine Potier – Annie Danzart SVG Exemples de clippath : le titre de ce document, le chat Un chat qui ondule en degrade 23

24 Christine Potier – Annie Danzart SVG Animation dérivé de SMIL 2.0 : SVG langage hôte balises danimation change les attributs « scalaires » –basée sur le temps et les évènements déplace un objet le long dun chemin transformations animées (modification de transform) Temporisation : choix du début, de la durée, du nombre de cycle, de la fin,.. exemple danimation: couleur, skewY, clipping,couleurskewYclipping 24

25 Christine Potier – Annie Danzart SVG Animation : un chat avec un nez rose 25

26 Christine Potier – Annie Danzart SVG Insérer un document SVG dans une page html Magasin en ligne ou bien Un chat dans une page html On peut aussi inclure un fichier compressé (zippé) 26

27 SVG animé avec Javascript –Communication inter-documents –Contourner les susceptibilités des navigateurs Intégrer un fond de carte dans du SVG. –Utilisation dun WMS (Web Map Services) SVG imbriqués: –système de coordonnées –La «bounding box»; encapsuler le SVG Génération dynamique de SVG –Bases de données. –AJAX, JavaScript Christine Potier – Annie Danzart SVG SVG: tout (ou presque) ce que vous voulez savoir (2) 27

28 Christine Potier – Annie Danzart SVG Interaction : les scripts Utilisation de scripts pour rendre interactifs les graphiques SVG Langage ECMAScript (the European Computer Manufacturer's Association) : –prend modèle sur Java, « même syntaxe » Orienté objet, interprété –versions différentes selon les navigateurs ( Javascript, Jscript) Les objets répondent à des événements –à des événements associés au statut d'un objet : onload –à des événements liés à la souris Cliquer : onclick, onmousedown, onmouseup Bouger la souris : onmouseover, onmouseout, onmousemove –à des événements non standardisés associés à des touches du clavier : onkeydown, onkeyup. Pour savoir où sest produit lévénement evt.target

29 Christine Potier – Annie Danzart SVG SVG et le DOM L'objet svgDocument se réfère au contenu affiché dans la fenêtre du navigateur. Il se trouve sous l'objet window (et éventuellement sous lobjet document ). L'objet svgDocument a toutes les propriétés et les méthodes de dom::Document, events::DocumentEvent Les éléments d'un document SVG sont des sous-objets de l'objet svgDocument La valeur de l'attribut 'Id' doit être unique dans tout le document XML et obéir aux règles sur les noms de variables de ECMAScript. Exmple, pour accéder à un élément par son nom : svgDocument.getElementById("Id") Tout noeud - et avec lui tout élément - peut être supprimé par son parent. Un attribut ne peut être supprimé que par lélément auquel il appartient. 29

30 Christine Potier – Annie Danzart SVG Arbre SVG et le DOM element : chaque élément est aussi un noeud svgDocument : racine de larbre Interface commune aux objets SVG node: Name (nom de la balise) Value Type parent/child (au sens des nœuds) Le DOM permet daccéder aux éléments et à leurs attributs Laborescence du DOM

31 __ |__ __ __ // cabine __ // caisse verte __ // we start here ! __ __ // bobine rouge __ // bobine bleue __ __ // grande lettre __ // caisse bleue Christine Potier – Annie Danzart SVG Arbre SVG => DOM Pour atteindre la racine du document var doc = svgDocument; Pour accéder à lélément « train » var train = doc.getElementById("train"); ou si on part de wagon1 var wagon1 // le noeud wagon1 est déjà un objet var train = wagon1.parentNode; Pour atteindre les composants de wagon1 (tableau) var composants = wagon1.childNodes; les objets peuvent répondre à des événements evt

32 Christine Potier – Annie Danzart SVG Les actions sur les objets SVG: quelques fonctionsquelques fonctions On peut : –Modifier les attributs des objets (taille, couleur, opacité, position, visibilité,...) getAttributeNS(url,"nom") setAttributeNS(url,"nom",valeur) createAttributeNS(): crée un nouvel attribut pour l'arborescence –Créer ou détruire des objets : createElementNS(): crée un nouvel élément pour l'arborescence createTextNode("un texte") : demande au document de créer un nouvel élément de texte dont le contenu est la chaîne transmise en argument. –Modifier l'arborescence : replaceChild(nouvelElement,ancienElement) : –va remplacer un nœud du document XML par un autre obj.firstChild : –sélectionne dans l'arbre XML le premier fils de l'objet obj appendChild(... ) Tout noeud - et avec lui tout élément - peut être supprimé par son parent. Un attribut ne peut être supprimé que par lélément auquel il appartient.

33 Christine Potier – Annie Danzart SVG Les fonctions Javascript dans un document SVG Directement dans le fichier svg

34 Christine Potier – Annie Danzart SVG Fonctions Javascript : Exemple 1Exemple 1 Un rectangle qui change de couleur au chargement (vert => bleu) evt : objet événement

35 Christine Potier – Annie Danzart SVG Un cercle qui change de taille : 2me exemple2me exemple Source du svg : Passer la souris sur le cercle pour changer sa taille. ou bien déclaration pure et simple dans le fichier « scripts.js » 35

36 Christine Potier – Annie Danzart SVG Manipulation du SVG: 2me exemple2me exemple.. function transformeTShirt() { obj = svgDocument.getElementById("tshirt"); obj.setAttribute("transform", "scale(" + facteurEchelle[choixEchelle] + ")"); obj.setAttribute("stroke-width", 1.0/facteurEchelle[choixEchelle] ); } function positionneEchelle(n) { var obj = svgDocument.getElementById("echelle" + choixEchelle); obj.setAttribute("fill", "white"); choixEchelle = n; var obj = svgDocument.getElementById("echelle" + choixEchelle); obj.setAttribute("fill", "#ffc"); transformeTShirt(); } Dans le svg.. S.. 36

37 Christine Potier – Annie Danzart SVG Communication inter-document HTML vers SVG –Dans le fichier html function ChangeStrokeColor(){ window.changeStrokeColor("blue"); } et –Dans le fichier SVG top.changeStrokeColor = ChangeStrokeColor; // pour que ce soit accessible depuis lHTML top.changeFillColor = ChangeFillColor; // et par des bookmarklets (et aussi quand SVG nest pas inclus) function ChangeStrokeColor(color) { SVGDocument.getElementById("colorCircle").setAttribute("stroke", color); } function ChangeFillColor(color) { SVGDocument.getElementById("colorCircle").setAttribute("fill", color); } Top (window) document body SVG html

38 Christine Potier – Annie Danzart SVG Communication SVG vers HTML Dans le HTML function ChangeColor(newColor) { document.bgColor=newColor; } Dans le SVG function talkToHtml() { top.ChangeColor("blue"); } Top (window) document body SVG parent

39 Christine Potier – Annie Danzart SVG Communication SVG vers HTML(2) Dans le HTML Top (window) document body SVG div

40 Christine Potier – Annie Danzart SVG Communication SVG vers SVG Dans le fichier HTML et la suite Dans svg-control.svg function TalkToSVG() { var body = top.document.body; body.setAttribute("bgColor","aaaa00"); var targetSVG = top.document.embeds["targetSVG"].getSVGDocument(); var targetElement = targetSVG.getElementById("colorRect"); targetElement.setAttribute("fill", "cyan"); } click Dans svg-target.svg function TalkToSVG() { var targetSVG = top.document.embeds["controlSVG"].getSVGDocument(); var targetElement = targetSVG.getElementById("cercle"); targetElement.setAttribute("fill", "magenta"); }

42 Christine Potier – Annie Danzart SVG Coordonnées: Comment savoir où on est? Changements de coordonnées définis par –les viewBox et les viewPort des svg imbriqués –les transformations géométriques successives Pile des transformations –A chaque élément est associé une matrice de transformation Système de coordonnées –Un point (x,y) représenté sous la forme dun vecteur: –La matrice de transformation est où correspond au changement déchelle, rotation, déformation et correspond à la translation On obtient

43 Christine Potier – Annie Danzart SVG Coordonnées: Comment savoir où on est? Coordonnées écran ou coordonnées utilisateur? Position du curseur: (evt.clientX, evt.clientY) en coordonnées écran Pour obtenir le point (x,y) dans le système utilisateur: on récupère la matrice de transformation mat = [svgElement].getCTM(); on inverse la matrice mat = mat.inverse(); on calcule les coordonnées utilisateur exemple :

44 Christine Potier – Annie Danzart SVG Coordonnées: On est-on (2)? mouse position (?, ?)screen mouse position (?, ?) user (50,50) …..

45 Génération dynamique de scripts svg Christine Potier – Annie Danzart SVG Serveur MySQL Navigateur Serveur Apache requête résultat Exécution du script php url: script php source SVG module php

46 Christine Potier – Annie Danzart SVG Interaction avec php : 4e exemple (1)4e exemple (1) Directement à l'appel du script php par affichage de l'url /carte.php?dep=51 Par insertion de l'appel dans une page html 4e exemple inséré dans une page Source de la page de l'exemple avec balise object d'inclusion du svg Remarque : on peut générer du code svg zippé, la décompression se fait sur le client au moment de l'affichage. 46

47 Christine Potier – Annie Danzart SVG Une application complète 47


Télécharger ppt "Christine Potier – Annie Danzart SVG - 23-04-08 Annie Danzart, Christine Potier Telecom-ParisTech 1."

Présentations similaires


Annonces Google