Scalable vector graphics SVG

Transcription

Faculté I&C, Claude Petitpierre, André Maurer
Page SVG
Scalable vector graphics
SVG
http://www.yoyodesign.org/doc/w3c/svg1/
(documentation en français – voir menu Aides)
<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
Composants SVG
Insertion d’un fichier SVG
dans un fichier HTML
<line id="ln" x1="5" y1="5" x2="45" y2="45" stroke="red"/>
<ellipse id="ell" cx="75" cy="75" rx="20" ry="10" fill="red"/>
<embed src="xxx.svg" name="svg0"
type="image/svg+xml"
width="200px" height="200px"/>
<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"/>
Formatage du texte
Placement du texte
<text x="200" y="50" text-anchor="end">Un texte</text>
end
middle
start
<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>
fill="red"
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
Transformation de groupe
<g transform="rotate(45, 8, 50)">
</g>
Liste des transformations
transform="rotate(30, 80, 100)"
transform="translate(100, 110)"
transform="scale(2, 3)"
transform="skewX(45)"
Matrice de translation
x'
1 0 tx
y' = 0 1 ty *
1
0 0 1
x' = x + tx
transform="skewY(30)"
y' = y + ty
Les angles sont en degrés
1 = 1
Matrice d’échelle
x'
sx 0 0
y' = 0 sy 0 •
1
0 0 1
x
y
1
x
y
1
Matrice de rotation
x'
cos(a) -sin(a) 0
x
y' = sin(a) cos(a) 0 • y
1
0
0
1
1
x' = sx · x
x' = x cos(a) – y cos(a)
y' = sy · y
y' = x sin(a) + y cos(a)
1 = 1
1 = 1
Matrice d’inclinaison selon x
skewX
Rotation en 2 dimensions
v'
α
α
vy
vy'
v
x'
1 tan(a) 0
x
y' = 0
1
0 • y
1
0
0
1
1
vx'
α
vx
vx‘ =
vx cos α
vx sin α
vy‘ = - vy sin α
vy cos α
=
=
cos α
sin α
?
?
?
?
- sin α
cos α
vx
* 0
cos α -sin α
sin α cos α
* 0
vy
∗
x' = x + y tan(a)
vx
vy
y' = y
1 = 1
Matrice d’inclinaison 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
Matrices de transformation
x’
y’ =
1
a c e
b d f
0 0 1
•
a’ c’ e’
b’ d’ f’
0 0 1
•
x
y
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.
Matrices de transformation
a c e
b d f
0 0 1
Exemple de transformation
définie par une matrice
transform="rotate(30)"
correspond à
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:
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)
[a b c d e f]
par exemple pour une inclinaison:
(Dans les transformations des éléments, les angles sont en degrés)
[1 tan(a) 0 0 1 0]
Clic sur un élément et affichage des coodonnées
xmlns:xlink="http://www.w3.org/1999/xlink">
<![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>
Lieu du pointage de la souris
xmlns:xlink="http://www.w3.org/1999/xlink"
onclick='execute(evt)'>
<![CDATA[
function execute (event) {
alert(event.clientX+” “+event.clientY)
}
]]>
</script>
</svg>
Création d’éléments sous la souris
Placement d’objets sous la souris
onmousemove="execute(evt,6)">
<![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>
</svg>
onmousemove="execute(evt)">
<![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>
Dessin SVG dans une page HTML
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>test</title>
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>
Communication HTMLÅÆSVG
Top
Page HTML
function battre() { . . . } // définition
bouger()
// appel
top.battre()
// appel
top.bouger = function() { . . . } // définition
Graphique SVG
Appels HTML ÅÆ SVG
Définition de groupes et
de chablons
Page HTML
svgDocument.getElementById(‘cercle’).setAttribute(“x”, 12)
Zone SVG
// dans onload ou autre
top.svgDocument = document
<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' />
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"/>
</linearGradient>
</defs>
<ellipse cx="200" cy="90" rx="80" ry="80" style="fill:url(#unGradient)"/>
Dégradé radial
<defs>
<radialGradient id="unGradient" cx="40%" cy="20%" r="30%" fx="40%" fy="20%">
</radialGradient>
</defs>
<ellipse cx="200" cy="90" rx="80" ry="80" style="fill:url(#unGradient)"/>
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>

Scalable vector graphics SVG

Transcription

Documents pareils

Courriel reçu suite à l`acquisition d`une chaîne hifi Jean Maurer

UN CUISINIER EN SD - La Maison de Petit Pierre

Alexandre Destraz

Projet Multimédia

Témoignage complet

Jacques Hohl - Jean Maurer

Témoignage complet

Yannick Dély

Export to PDF