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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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.

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) ]

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 = 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)

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

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

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

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

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

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

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

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

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

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

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