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)
Jan 20, 2016
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)
Faculté I&C, Claude Petitpierre, André Maurer
Page SVG
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org /1999/xlink“>
<script type="text/javascript"> <![CDATA[ function execute (x) { . . . Javascript } ]]> </script> <circle id="circ" cx="25" cy="75" r="20" fill="red"/></svg> Eléments SVG
Faculté I&C, Claude Petitpierre, André Maurer
Insertion d’un fichier SVGdans 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
<line id="ln" x1="5" y1="5" x2="45" y2="45" stroke="red"/>
<circle id="circ" cx="25" cy="75" r="20" fill="red"/>
<ellipse id="ell" cx="75" cy="75" rx="20" ry="10" fill="red"/>
<path id="path" d="M105,105 C105,145 145,145 145,105" stroke="red" fill="none"/>
<polyline id="pLine" points="105,5 145,45 105,45 145,5" stroke="red" fill="none"/>
<polygon id="poly" points="155,5 195,45 155,45 195,5" stroke="red" fill="none"/>
<rect id="rect" x="105" y="55" width="40" height="40" fill="red“ stroke-width=“4“/>
<rect id="rectr" x="155" y="55" rx="5" ry="5" width="40" height="40" fill="red"/>
Faculté I&C, Claude Petitpierre, André Maurer
Placement du texte
<text x="200" y="50" text-anchor="end">Un texte</text>
end
middle
start
fill="red"
Faculté I&C, Claude Petitpierre, André Maurer
Formatage du texte
<g font-family="Verdana" font-size="45" id='grp'> <text x="200" y="150" fill="blue"> Ce <tspan font-weight="bold" fill="red">n'est pas</tspan> une banane. </text> </g>
Faculté I&C, Claude Petitpierre, André Maurer
Transformations<line id="ln1" x1="5" y1="5" x2="45" y2="5" stroke="blue"/>
<line id="ln2" x1="5" y1="5" x2="45" y2="5" stroke="green" transform="rotate(30, 8, 20)"/>
<line id="ln3" x1="5" y1="5" x2="45" y2="5" stroke="red" transform="translate(20, 20) rotate(30, 8, 20)"/>
<line id="ln3" x1="5" y1="5" x2="45" y2="5" stroke="black" transform="rotate(30, 8, 20) translate(20, 20)"/>
centre de rotation
Faculté I&C, Claude Petitpierre, André Maurer
Transformation de groupe
<g transform="rotate(45, 8, 50)"> <line id="ln" x1="5" y1="5" x2="45" y2="5" stroke="red"/> <line id="ln" x1="5" y1="15" x2="45" y2="15" stroke="red"/> <line id="ln" x1="5" y1="25" x2="45" y2="25" stroke="red"/></g>
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' 1 0 tx x
y' = 0 1 ty * y
1 0 0 1 1
x' = x + tx
y' = y + ty
1 = 1
Faculté I&C, Claude Petitpierre, André Maurer
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
Faculté I&C, Claude Petitpierre, André Maurer
x' cos(a) -sin(a) 0 x
y' = sin(a) cos(a) 0 • y
1 0 0 1 1
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
vy
vx
vx'vy'v
v'
vx‘ = = *
vy‘ = = *
vx cos cos vx
vx sin sin cos -sin vx
sin cos vy
- vy sin ? - sin vy cos ? cos vy
Faculté I&C, Claude Petitpierre, André Maurer
x' 1 tan(a) 0 x
y' = 0 1 0 • y
1 0 0 1 1
Matrice d’inclinaison selon xskewX
x' = x + y tan(a)
y' = y
1 = 1
Faculté I&C, Claude Petitpierre, André Maurer
x' 1 0 0 x
y' = tan(a) 1 0 • y
1 0 0 1 1
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’ 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éesen partant de la dernière dans les transformations définies dansles éléments SVG.
Faculté I&C, Claude Petitpierre, André Maurer
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 d’un tableau à une dimension:
[a b c d e f]
par exemple pour une inclinaison:
[1 tan(a) 0 0 1 0]
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)
Faculté I&C, Claude Petitpierre, André Maurer
Clic sur un élément et affichage des coodonnées
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<script type="text/javascript">
<![CDATA[
function execute (event, n) {
alert(event.clientX+" "+ event.clientY+" "+n)
} // lieu du pointage de la souris
]]>
</script>
<circle id="circ" cx="25" cy="75" r="20" fill="red"
onclick="execute(evt,5)"/>
</svg>
Faculté I&C, Claude Petitpierre, André Maurer
Lieu du pointage de la souris
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
onclick='execute(evt)'>
<script type="text/javascript">
<![CDATA[
function execute (event) {
alert(event.clientX+” “+event.clientY)
}
]]>
</script>
<circle id="circ" cx="25" cy="75" r="20" fill="red"/>
</svg>
Faculté I&C, Claude Petitpierre, André Maurer
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
onmousemove="execute(evt,6)">
<script type="text/javascript">
<![CDATA[
function execute (e, n) {
document.getElementById("circ").setAttribute("cx", e.clientX)
document.getElementById("circ").setAttribute("cy", e.clientY)
} // le cercle suit la souris !
]]>
</script>
<circle id="circ" cx="25" cy="75" r="20" fill="red"/>
</svg>
Placement d’objets sous la souris
Faculté I&C, Claude Petitpierre, André Maurer
Création d’éléments sous la souris<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" onmousemove="execute(evt)"> <script type="text/javascript"> <![CDATA[ function execute (e) { var shape = document.createElementNS( "http://www.w3.org/2000/svg", "circle"); shape.setAttribute("cx", e.clientX); shape.setAttribute("cy", e.clientY); shape.setAttribute("r", 2); shape.setAttribute("fill", "green"); document.documentElement.appendChild(shape); } ]]> </script></svg>
Faculté I&C, Claude Petitpierre, André Maurer
Dessin SVG dans une page HTML
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>test</title> <script type="text/javascript"> function tst() { execute(100,100) // défini dans le fichier SVG } </script> </head> <body> <button onclick='tst()'>Test</button> <embed src="temp.svg" name="svg0" type="image/svg+xml" width="200px" height="200px"/> </body></html>
Faculté I&C, Claude Petitpierre, André Maurer
Communication HTMLSVG
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
<defs> groupes . . . (dans n'importe quel ordre) éléments . . .<g id='group1' fill='green' transform='scale(0.5) rotate(30)'> éléments . . .</g></defs>
<use x='240' y='5' xlink:href='#group1' />
Faculté I&C, Claude Petitpierre, André Maurer
Dégradés de couleur
<defs><linearGradient id='unGradient' x1=“20%" y1="0%" x2="100%" y2=“50%"><stop offset="20%" stop-color="rgb(255,255,0)" stop-opacity="1"/><stop offset="80%" stop-color="rgb(255,0,0)" stop-opacity="1"/></linearGradient></defs>
<ellipse cx="200" cy="90" rx="80" ry="80" style="fill:url(#unGradient)"/>
Faculté I&C, Claude Petitpierre, André Maurer
Dégradé radial
<defs><radialGradient id="unGradient" cx="40%" cy="20%" r="30%" fx="40%" fy="20%"><stop offset="20%" stop-color="rgb(255,255,0)" stop-opacity="1"/><stop offset="80%" stop-color="rgb(255,0,0)" stop-opacity="1"/></radialGradient></defs>
<ellipse cx="200" cy="90" rx="80" ry="80" style="fill:url(#unGradient)"/>
Faculté I&C, Claude Petitpierre, André Maurer
Textes incurvés
<defs><path id="textPath" d="M10 50 C10 0 90 0 90 50"/></defs>
<text fill="red"> <textPath xlink:href="#textPath">Aaaa Bbbb Cbbb</textPath></text>