SVG: Scalable Vector Graphics Exemple: Vienne. AWEB - 21-02-06 SVG: Scalable Vector Graphics Dialecte dXML pour la représentation de graphique vectoriel

  • View
    103

  • Download
    1

Embed Size (px)

Text of SVG: Scalable Vector Graphics Exemple: Vienne. AWEB - 21-02-06 SVG: Scalable Vector Graphics...

  • Page 1
  • SVG: Scalable Vector Graphics Exemple: Vienne
  • Page 2
  • AWEB - 21-02-06 SVG: Scalable Vector Graphics Dialecte dXML pour la reprsentation de graphique vectoriel 2D Tracs de base en vectoriel (courbes, lignes, rectangles,) Affichage labor de texte Affichage dimages bitmap Animation du type SMILAnimation Interfaage avec ECMAScript Interaction avec les bases de donnes (php) Affichage dans un navigateur Plugin SVG (Adobe). En natif dans FireFox 1.5 (pas toutes les fonctionnalits) Fonctions prdfinies: zoom, dplacement On peut afficher un fichier svg zipp Concurrent:Flash Extension : SVG Mobile en cours de normalisation (SVGTiny)
  • Page 3
  • AWEB - 21-02-06 Code Rgles de XML : . Toute balise ouverte doit tre ferme balises autofermantes On peut mettre des attributs dans la balise 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 imbriqus dfinition dobjets rfrencs rutilisables et use
  • Page 4
  • AWEB - 21-02-06 Structure dun fichier SVG 1. version de xml 2. Rfrence la DTD, informations sur la structure du document 3.
  • AWEB - 21-02-06 Exemple de svg imbriqus
  • Page 8 SVG orientation, textPath trac le long dun chemintextPath Attributs de laffichage : couleur de remplissage, couleur du trait, opacit, paisseur du trait,... style="stroke:#000000; stroke-width:2; fill:none; " couleur : rgb(r,v,b) 0 r,v,b 255 couleurs en Hexadcimal ou prdfinies, dgrads,...">
  • AWEB - 21-02-06 Objets SVG Affichage de texte : cx="100" cy="100" r="100" fx="200" fy="100">">
  • AWEB - 21-02-06 Dgrads de couleur dgraddgrad linaire dgraddgrad radial cx="100" cy="100" r="100" fx="100" fy="0"> cx="100" cy="100" r="100" fx="200" fy="100">
  • Page 10
  • AWEB - 21-02-06 Objets graphiques line : polyline et polygone : rectangle: coins arrondis rx="5" ry="3" cercle : ellipse : chemin M (ou m) moveto coordoones absolues (L) ou relatives (l)
  • Page 11
  • AWEB - 21-02-06 Path chemin : lineto coordoones absolues (L) ou relatives ( l ) (point prcdent) Bzier quadratiquequadratique M x 0 y 0 Q x 1 y 1 x 2 y 2 ou q en relatif par rapport P 0 Bzier 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...
  • Page 12
  • AWEB - 21-02-06 Transformations gomtriques attribut transform Translation: translate(a,b) Rotation autour de lorigine rotate( ), en degr ou rotation autour dun point rotate(, x, y) homotthie scale(a) ou scale(a,b) dformation 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)
  • Page 13 ">
  • AWEB - 21-02-06 divers Dfinition dun noeud XML on regroupe un ensemble dobjets SVG au niveau des noeuds, on peut appliquer : suppression, changement de style, transformation gomtrique,.. priorit aux redfinitions dans les sous-noeuds Clipping clipPath dfini partir de path, text, line, rect, circle, ellipse, polyline, polygon et use...... ---------" title="AWEB - 21-02-06 Exemple de clippath
  • AWEB - 21-02-06 Balise dfinition dobjet identifi par son nom pas directement utilis, mais pouvant tre rfrenc on peut dfinir un ensemble dobjets:
  • Page 16
  • AWEB - 21-02-06 Animation driv de SMIL 2.0 : SVG langage hte balises danimation change les attributs scalaires base sur le temps et les vnements dplace un objet le long dun chemin transformations animes (modification de transform) Temporisation : choix du dbut, de la dure, du nombre de cycle, de la fin,.. exemple danimation: couleur, skewY, clipping,couleurskewYclipping
  • Page 17
  • AWEB - 21-02-06 Interaction : les scripts Utilisation de scripts pour rendre interactifs les graphiques SVG Langage ECMAScript (the European Computer Manufacturer's Association) : prend modle sur Java, mme syntaxe Orient objet, interprt versions diffrentes selon les navigateurs ( Javascript, Jscript) Les objets rpondent des vnements des vnements associs au statut d'un objet : onload des vnements lis la souris Cliquer : onclick, onmousedown, onmouseup Bouger la souris : onmouseover, onmouseout, onmousemove des vnements non standardiss associs des touches du clavier : onkeydown, onkeyup. Pour savoir o sest produit lvnement evt.getTarget() ou evt.target
  • Page 18
  • AWEB - 21-02-06 SVG et le DOM L'objet svgDocument se rfre au contenu affich dans la fentre du navigateur. Il se trouve sous l'objet window (et ventuellement sous lobjet document ). L'objet svgDocument a toutes les proprits et les mthodes de dom::Document, events::DocumentEvent Les lments 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 obir aux rgles sur les noms de variables de ECMAScript. Exmple, pour accder un lment par son nom : svgDocument.getElementById("Id") Tout noeud - et avec lui tout lment - peut tre supprim par son parent. Un attribut ne peut tre supprim que par llment auquel il appartient.
  • Page 19
  • AWEB - 21-02-06 Arbre SVG et le DOM Le DOM permet daccder aux lments et leurs attributs Laborescence du DOM element : chaque lment 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 nuds)
  • Page 20
  • AWEB - 21-02-06 Arbre SVG => DOM __ |__ __ __ // cabine __ // caisse verte __ // we start here ! __ __ // bobine rouge __ // bobine bleue __ __ // grande lettre __ // caisse bleue Pour atteindre la racine du document var doc = svgDocument; Pour accder llment train var train = doc.getElementById("train"); ou si on part de wagon1 var wagon1 // le noeud wagon1 est dj un objet var train = wagon1.parentNode; Pour atteindre les composants de wagon1 (tableau) var composants = wagon1.childNodes; les objets peuvent rpondre des vnements evt
  • Page 21
  • AWEB - 21-02-06 Les actions sur les objets SVG: quelques fonctionsquelques fonctions On peut : Modifier les attributs des objets (taille, couleur, opacit, position, visibilit,...) getAttribute("nom") setAttribute("nom",valeur) createAttribute(): cre un nouvel attribut pour l'arborescence Crer ou dtruire des objets : createElement(): cre un nouvel lment pour l'arborescence createTextNode("un texte") : demande au document de crer un nouvel lment de texte dont le contenu est la chane transmise en argument. Modifier l'arborescence : replaceChild(nouvelElement,ancienElement) : va remplacer un nud du document XML par un autre obj.firstChild : slectionne dans l'arbre XML le premier fils de l'objet obj appendChild(... ) Tout noeud - et avec lui tout lment - peut tre supprim par son parent. Un attribut ne peut tre supprim que par llment auquel il appartient.
  • Page 22
  • AWEB - 21-02-06 Les fonctions Javascript dans un document SVG Directement dans le fichier svg
  • Page 23
  • AWEB - 21-02-06 Fonctions Javascript : Exemple 1Exemple 1 Un rectangle qui change de couleur au chargement (vert => bleu) evt : objet vnement
  • AWEB - 21-02-06 Un cercle qui change de taille : 2me exemple2me exemple Source du svg : Passer la souris sur le cercle pour changer sa taille. ou bien dclaration pure et simple dans le fichier scripts.js
  • Page 25
  • AWEB - 21-02-06 Manipulation du SVG: 3me exemple3me 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..
  • Page 26
  • AWEB - 21-02-06 Fonctions Javascript : 3me exemple (2)3me exemple (2) Insrer un document svg dans une page html : Magasin en ligne ou bien On peut inclure un fichier compress (zipp) ">
  • AWEB - 21-02-06 Animation des couleurs - source
  • Page 32 "> SVG Unleashed SVG Unleashed"> " title="AWEB - 21-02-06 Animation Dformation - source ">
  • AWEB - 21-02-06 Animation Dformation - source SVG Unleashed SVG Unleashed
  • Page 33 element -->">
  • AWEB - 21-02-06 Animation clipath-source element -->
  • Page 34
  • AWEB - 21-02-06 Manipulation de svg : quelques fonctions svgDocument : rfrence au document SVG tout entier et on utilise ses proprits et mthodes pour accder aux parties du document dont on a besoin. evt.target : retourne une rfrence vers l'objet graphique qui a dclench l'vnement. En gnral, on la stocke dans une variable. getElementById(Id) : prend une chane de caractres comme paramtre et retourne l'objet dont l'attribut id correspond. setAttribute : modifie la valeur d'un attribut getAttribute(_nom_) : rcupre, sous la forme d'une chaine de caractres, la valeur de l'attribut mentionn svgDocument.createTextNode(_un texte_) : demande au document de crer un nouvel lment de texte dont le contenu est la chane transmise en argument. replaceChild(nouvelElement,ancien