Faculté I&C, Claude Petitpierre, André Maurer Scalable vector graphics SVG (documentation en français – voir menu.

Présentation au sujet: "Faculté I&C, Claude Petitpierre, André Maurer Scalable vector graphics SVG (documentation en français – voir menu."— Transcription de la présentation:

1 Faculté I&C, Claude Petitpierre, André Maurer Scalable vector graphics SVG http://www.yoyodesign.org/doc/w3c/svg1/ (documentation en français – voir menu Aides)

2 Faculté I&C, Claude Petitpierre, André Maurer Page SVG Eléments SVG

3 Faculté I&C, Claude Petitpierre, André Maurer Insertion dun fichier SVG dans un fichier HTML <embed src="xxx.svg" name="svg0" type="image/svg+xml" width="200px" height="200px"/>

4 Faculté I&C, Claude Petitpierre, André Maurer Composants SVG

5 Faculté I&C, Claude Petitpierre, André Maurer Placement du texte Un texte end middle start fill="red"

6 Faculté I&C, Claude Petitpierre, André Maurer Formatage du texte Ce n'est pas une banane.

7 Faculté I&C, Claude Petitpierre, André Maurer Transformations centre de rotation

8 Faculté I&C, Claude Petitpierre, André Maurer Transformation de groupe

9 Faculté I&C, Claude Petitpierre, André Maurer Liste des transformations transform="rotate(30, 80, 100)" transform="translate(100, 110)" transform="scale(2, 3)" transform="skewX(45)" transform="skewY(30)" Les angles sont en degrés

10 Faculté I&C, Claude Petitpierre, André Maurer Matrice de translation x'10txx y'=01ty*y 10011 x'=x + tx y'=y + ty 1= 1

11 Faculté I&C, Claude Petitpierre, André Maurer Matrice déchelle x' sxsx 00x y'=0sysy 0y 10011 x'= s x · x y'= s y · y 1= 1

12 Faculté I&C, Claude Petitpierre, André Maurer x'cos(a)-sin(a)0x y'=sin(a)cos(a)0y 10011 Matrice de rotation x'= x cos(a) – y cos(a) y'= x sin(a) + y cos(a) 1= 1

13 Faculté I&C, Claude Petitpierre, André Maurer Rotation en 2 dimensions vyvy vxvx vx'vx' vy'vy' v v' v x = = * v y = = * v x cos cos v x v x sin sin cos -sin v x sin cos v y - v y sin ? - sin v y cos ? cos v y

14 Faculté I&C, Claude Petitpierre, André Maurer x'1tan(a)0x y'=010y 10011 Matrice dinclinaison selon x skewX x'= x + y tan(a) y'= y 1= 1

15 Faculté I&C, Claude Petitpierre, André Maurer x'100x y'=tan(a)10y 10011 Matrice dinclinaison selon y x'= x y'= x tan(a) + y 1= 1

16 Faculté I&C, Claude Petitpierre, André Maurer Matrices de transformation xace y =bdf 1001 acex bdf y 0011 Ce qui explique pourquoi les transformations sont appliquées en partant de la dernière dans les transformations définies dans les éléments SVG.

17 Faculté I&C, Claude Petitpierre, André Maurer Matrices de transformation ace bdf 001 La dernière ligne est toujours la même. Il suffit donc de connaître 6 composantes de la matrice pour la déterminer. On peut parfois la passer à une fonction sous la forme dun tableau à une dimension: [a b c d e f] par exemple pour une inclinaison: [1 tan(a) 0 0 1 0]

18 Faculté I&C, Claude Petitpierre, André Maurer Exemple de transformation définie par une matrice transform="rotate(30)" correspond à transform=matrix(0.866, 0.5, -0.5, 0.866, 0, 0)" avec 0.866 = cos(Math.PI/180.0 * 30.0) 0.5 = sin(Math.PI/180.0 * 30.0) (Dans les transformations des éléments, les angles sont en degrés)

19 Faculté I&C, Claude Petitpierre, André Maurer Clic sur un élément et affichage des coodonnées

20 Faculté I&C, Claude Petitpierre, André Maurer Lieu du pointage de la souris <![CDATA[ function execute (event) { alert(event.clientX+ +event.clientY) } ]]>

21 Faculté I&C, Claude Petitpierre, André Maurer Placement dobjets sous la souris

22 Faculté I&C, Claude Petitpierre, André Maurer Création déléments sous la souris

23 Faculté I&C, Claude Petitpierre, André Maurer Dessin SVG dans une page HTML test function tst() { execute(100,100) // défini dans le fichier SVG } Test <embed src="temp.svg" name="svg0" type="image/svg+xml" width="200px" height="200px"/>

24 Faculté I&C, Claude Petitpierre, André Maurer Communication HTML SVG Top top.battre() // appel top.bouger = function() {... } // définition Graphique SVG Page HTML function battre() {... } // définition bouger() // appel

25 Faculté I&C, Claude Petitpierre, André Maurer Appels HTML SVG Page HTML svgDocument.getElementById(cercle).setAttribute(x, 12) Zone SVG // dans onload ou autre top.svgDocument = document

26 Faculté I&C, Claude Petitpierre, André Maurer Définition de groupes et de chablons groupes... (dans n'importe quel ordre) éléments... éléments...

27 Faculté I&C, Claude Petitpierre, André Maurer Dégradés de couleur

28 Faculté I&C, Claude Petitpierre, André Maurer Dégradé radial

29 Faculté I&C, Claude Petitpierre, André Maurer Textes incurvés Aaaa Bbbb Cbbb