Scalable vector graphics SVG

1
Scalable vector graphics SVG
http//www.yoyodesign.org/doc/w3c/svg1/ (documenta
tion en français voir menu Aides)
2
Page SVG
ltsvg xmlns"http//www.w3.org/2000/svg"    xmlns
xlink"http//www.w3.org /1999/xlinkgt     ltscrip
t type"text/javascript"gt        lt!CDATA      
      function execute (x)                 . . .
Javascript        
            gt    lt/scriptgt    ltcircle id"ci
rc" cx"25" cy"75" r"20" fill"red"/gtlt/svggt

Eléments SVG
3
Insertion dun fichier SVGdans un fichier HTML
ltembed src"xxx.svg"  name"svg0" 
type"image/svgxml" 
width"200px" height"200px"/gt
4
Composants SVG
ltline id"ln" x1"5" y1"5" x2"45" y2"45" stroke
"red"/gt ltcircle id"circ" cx"25" cy"75" r"20" 
fill"red"/gt ltellipse id"ell" cx"75" cy"75" rx
"20" ry"10" fill"red"/gt ltpath id"path" d"M105,
105 C105,145 145,145 145,105" stroke"red" fill"n
one"/gt ltpolyline id"pLine" points"105,5 145,45
105,45 145,5" stroke"red" fill"none"/gt ltpolygon 
id"poly" points"155,5 195,45 155,45
195,5" stroke"red" fill"none"/gt ltrect id"rect" 
x"105" y"55" width"40" height"40" fill"red
stroke-width4/gt ltrect id"rectr" x"155" y"55"
 rx"5" ry"5" width"40" height"40" fill"red"/gt
5
Placement du texte
lttext x"200" y"50" text-anchor"end"gtUn textelt/t
extgt end middle start fill"red"
6
Formatage du texte
    ltg font-family"Verdana" font-size"45" id'gr
p'gt        lttext x"200" y"150" fill"blue"gt   
         Ce            lttspan font-weight"bold" 
fill"red"gtn'est paslt/tspangt            une banan
e.        lt/textgt    lt/ggt
7
Transformations
ltline id"ln1" x1"5" y1"5" x2"45" y2"5" stroke
"blue"/gt ltline id"ln2" x1"5" y1"5" x2"45" y2
"5" stroke"green"            transform"rotate(3
0, 8, 20)"/gt ltline id"ln3" x1"5" y1"5" x2"45" 
y2"5" stroke"red"            transform"transla
te(20, 20) rotate(30, 8, 20)"/gt ltline id"ln3" x1
"5" y1"5" x2"45" y2"5" stroke"black"         
   transform"rotate(30, 8, 20) translate(20,
20)"/gt
centre de rotation
8
Transformation de groupe
 ltg  transform"rotate(45, 8, 50)"gt        ltline 
id"ln" x1"5" y1"5" x2"45" y2"5" stroke"red"/
gt        ltline id"ln" x1"5" y1"15" x2"45" y2
"15" stroke"red"/gt        ltline id"ln" x1"5" y
1"25" x2"45" y2"25" stroke"red"/gtlt/ggt
9
Liste des transformations
transform"rotate(30, 80, 100)"transform"transla
te(100, 110)"transform"scale(2,
3)"transform"skewX(45)"transform"skewY(30)"
Les angles sont en degrés
10
Matrice de translation
x' 1 0 tx x
y' 0 1 ty y
1 0 0 1 1
x' x tx y' y ty 1 1
11
Matrice déchelle
x' sx 0 0 x
y' 0 sy 0 y
1 0 0 1 1
x' sx x y' sy y 1 1
12
Matrice de rotation
x' cos(a) -sin(a) 0 x
y' sin(a) cos(a) 0 y
1 0 0 1 1
x' x cos(a) y cos(a) y' x sin(a) y
cos(a) 1 1
13
Rotation en 2 dimensions
v'
a
vy
vx'
vy'
a
v
a
vx
vx cos a cos a ? vx
vx sin a sin a ? 0
cos a -sin a vx


sin a cos a vy -
vy sin a ? - sin a 0 vy
cos a ? cos a vy
vx



vy

14
Matrice dinclinaison selon xskewX
x' 1 tan(a) 0 x
y' 0 1 0 y
1 0 0 1 1
x' x y tan(a) y' y 1 1
15
Matrice dinclinaison selon y
x' 1 0 0 x
y' tan(a) 1 0 y
1 0 0 1 1
x' x y' x tan(a) y 1 1
16
Matrices de transformation
x a c e
y b d f
1 0 0 1
a c e x
b d f y
0 0 1 1

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
Matrices de transformation
a c e
b d f
0 0 1
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
Exemple de transformation définie par une matrice
transform"rotate(30)" correspond à
  transformmatrix(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
Clic sur un élément et affichage des coodonnées
ltsvg xmlns"http//www.w3.org/2000/svg"    xmlns
xlink"http//www.w3.org/1999/xlink"gt    ltscript 
type"text/javascript"gt        lt!CDATA        
    function execute (event, n)                 
alert(event.clientX" " event.clientY" "n)    
         // lieu du pointage de la souris
        gt    lt/scriptgt    ltcircle id"circ" cx
"25" cy"75" r"20" fill"red"               onc
lick"execute(evt,5)"/gtlt/svggt
20
Lieu du pointage de la souris
ltsvg xmlns"http//www.w3.org/2000/svg"    xmlns
xlink"http//www.w3.org/1999/xlink"    onclick'
execute(evt)'gt    ltscript type"text/javascript"gt
        lt!CDATA            function execute (e
vent)                 alert(event.clientX
event.clientY)                     gt    lt/
scriptgt    ltcircle id"circ" cx"25" cy"75" r"2
0" fill"red"/gtlt/svggt
21
Placement dobjets sous la souris
ltsvg xmlns"http//www.w3.org/2000/svg"    xmlns
xlink"http//www.w3.org/1999/xlink"    onmousemo
ve"execute(evt,6)"gt    ltscript type"text/javasc
ript"gt        lt!CDATA            function exec
ute (e, n)                 document.getElementBy
Id("circ").setAttribute("cx", e.clientX)         
       document.getElementById("circ").setAttribut
e("cy", e.clientY)             // le cercle
suit la souris !        gt    lt/scriptgt    ltci
rcle id"circ" cx"25" cy"75" r"20" fill"red"/gt
lt/svggt
22
Création déléments sous la souris
ltsvg xmlns"http//www.w3.org/2000/svg"         x
mlnsxlink"http//www.w3.org/1999/xlink"        
 onmousemove"execute(evt)"gt    ltscript type"tex
t/javascript"gt        lt!CDATA            funct
ion execute (e)                 var shape  docu
ment.createElementNS(                    "http//
www.w3.org/2000/svg", "circle")                s
hape.setAttribute("cx", e.clientX)              
  shape.setAttribute("cy", e.clientY)           
     shape.setAttribute("r", 2)                s
hape.setAttribute("fill", "green")              
  document.documentElement.appendChild(shape)   
                 gt    lt/scriptgtlt/svggt
23
Dessin SVG dans une page HTML
lthtmlgt    ltheadgt        ltmeta http-equiv"Conten
t-Type" content"text/html charsetutf-8"/gt     
   lttitlegttestlt/titlegt        ltscript type"text/
javascript"gt            function tst()         
       execute(100,100) // défini dans le
fichier SVG                     lt/scriptgt    lt/
headgt    ltbodygt        ltbutton onclick'tst()'gtT
estlt/buttongt        ltembed src"temp.svg" name"s
vg0"  type"image/svgxml" 
                      width"200px" height"200px"
/gt    lt/bodygtlt/htmlgt
24
Communication HTML??SVG
Top
Page HTML function battre() . . .
// définition bouger()
// appel
top.battre() //
appel top.bouger function() . . . //
définition Graphique SVG
25
Appels HTML ?? SVG
Page HTML svgDocument.getElementById(ce
rcle).setAttribute(x, 12)

Zone SVG // dans onload ou autre
top.svgDocument document
26
Définition de groupes et de chablons
ltdefsgt    groupes . . . (dans n'importe quel
ordre)    éléments . . .ltg id'group1'
fill'green' transform'scale(0.5) rotate(30)'gt 
  éléments . . .lt/ggtlt/defsgt ltuse x'240'
y'5' xlinkhref'group1' /gt
27
Dégradés de couleur
ltdefsgtltlinearGradient id'unGradient' x120"
y1"0" x2"100" y250"gtltstop offset"20"
stop-color"rgb(255,255,0)" stop-opacity"1"/gtltst
op offset"80" stop-color"rgb(255,0,0)"
stop-opacity"1"/gtlt/linearGradientgtlt/defsgt ltell
ipse cx"200" cy"90" rx"80" ry"80"
style"fillurl(unGradient)"/gt
28
Dégradé radial
ltdefsgtltradialGradient id"unGradient" cx"40"
cy"20" r"30" fx"40" fy"20"gtltstop
offset"20" stop-color"rgb(255,255,0)"
stop-opacity"1"/gtltstop offset"80"
stop-color"rgb(255,0,0)" stop-opacity"1"/gtlt/rad
ialGradientgtlt/defsgt ltellipse cx"200" cy"90"
rx"80" ry"80" style"fillurl(unGradient)"/gt
29
Textes incurvés
ltdefsgtltpath id"textPath" d"M10 50 C10 0 90 0 90
50"/gt lt/defsgt lttext fill"red"gt   lttextPath
xlinkhref"textPath"gtAaaa Bbbb
Cbbblt/textPathgtlt/textgt