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

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.

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

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 = 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 d’objets 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 Fichier SVG

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

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