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 d’un 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 x'1tan(a)0x y'=010y 10011 Matrice d’inclinaison selon x skewX x'= x + y tan(a) y'= y 1= 1

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

15 Faculté I&C, Claude Petitpierre, André Maurer Matrices de transformation x’ace y’ =bdf 1001 a’c’e’x b’d’f’ 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.

16 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 d’un tableau à une dimension: [a b c d e f] par exemple pour une inclinaison: [1 tan(a) 0 0 1 0]

17 Faculté I&C, Claude Petitpierre, André Maurer Exemple de transformation 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)

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

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

20 Faculté I&C, Claude Petitpierre, André Maurer Placement d’objets sous la souris

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

22 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"/>

23 Faculté I&C, Claude Petitpierre, André Maurer Fichier SVG

24 Faculté I&C, Claude Petitpierre, André Maurer Fonction appelable depuis la page HTML <![CDATA[ top.tst = function(x, y) { var shape = document.createElementNS( "http://www.w3.org/2000/svg", "circle");... Page HTML shape.setAttribute("fill", "green"); document.documentElement.appendChild(shape); } ]]> // svgDocument est accessible depuis la page HTML

25 Faculté I&C, Claude Petitpierre, André Maurer Appels HTML  SVG Page HTML function execH() {... } svgDocument.getElementById(‘cercle’).setAttribute(“x”, 12) execS() Zone SVG // dans onload ou autre top.svgDocument = document top.execS = function() {... } top.execH()