|
Introduction
Dans notre précédent
article, nous avons donné la structure de base d'un document
SVG (corps, formes de base, formes définies à partir
d'un "chemin"...) et nous sommes penchés sur la
réutilisation de formes déjà définies.
Pour achever ce tour d'horizon, nous allons réaliser l'exemple
suivant, qui va nous permettre d'explorer différentes
autres possibilités du langage (insertion de texte, dégradé
de couleurs, rotation, animation).
(Rappel: pour visualiser
l'exemple, vous avez besoin d'un plug-in;
par ailleurs, si vous recontrez des problèmes, télécharger
le fichier d'exemple et faites le tourner depuis votre disque dur).
Insertion de texte
Commençons par afficher "JDNet Développeurs":
nous utiliserons pour cela la balise <text />, écrivant:
<text font-family="Verdana" font-size="8pt"
fill="#000000" x="10" y="10">
JDNet Développeurs
</text>
Nous définissons le type (famille) de police, la taille,
la couleur de remplissage des caractères, et les coordonnées
du coin supérieur gauche du premier caractère du texte.
Ce dernier est encadré entre les balises d'ouverture et de
fermeture de l'élément "text".
Dégradé de couleur
Plutôt que
des caractères noirs, nous allons utiliser un dégradé
de couleur pour notre texte. Nous allons définir un élément
réutilisable, repéré par l'identifiant
"degrade", qui nous servira de couleur de remplissage.
Ainsi nous écrivons:
<defs>
<linearGradient id="degrade">
<stop offset="5%" style="stop-color:#660000"/>
<stop offset="95%" style="stop-color:#CCCCCC"/>
</linearGradient>
</defs>
Où l'élément "defs" caractérise
un élément réutilisable, et l'élément
"linearGradient" un dégradé de couleur
sous forme de gradient linéaire.
Ce gradient sera délimité par deux couleurs, du rouge
foncé (#660000) et du gris clair (#CCCCCC). Il est bien sûr
nécessaire, pour obtenir un effet de dégradé,
que deux couleurs soient définies. C'est le rôle des
éléments "stop" dont les attributs
"offset" spécifient, le long du "vecteur
de gradient" (il s'agit ici d'un gradient linéaire),
les positions de début des zones colorées (dans les
couleurs correspondantes).
Il nous faut ensuite modifier notre élément "text"
en écrivant:
<text
font-family="Verdana" font-size="8pt" fill="url(#degrade)"
x="10" y="10">
où, comme couleur de remplissage, on fait référence
à notre élément "linearGradient"
repéré par "degrade".
Rotation
Pour tracer la forme circulaire composée de triangles, nous
allons définir un élément réutilisable
auquel nous allons appliquer diverses rotations.
Ainsi, nous écrirons:
<defs>
<path id="triangle" d="M240,280l20,0 -10,20z"
style="fill: #DDDDDD; stroke: #333333; stroke-width: 2">
</path>
</defs>
(nous ne revenons pas ici sur la syntaxe de
l'attribut "d" de l'élément "path",
ni sur le "style" de la forme dessinée : voir à
ce sujet notre introduction à
SVG)
puis, en appliquant une série de rotations d'angles multiples
de 20 degrés, et de centre de coordonnées 250 en abscisses
et 250 en ordonnées (nous choisissons une image de taille
500 sur 500, l'unité étant le pixel):
<use xlink:href="#triangle" transform="rotate(0,
250, 250)" />
<use xlink:href="#triangle" transform="rotate(20,
250, 250)" />
<use xlink:href="#triangle" transform="rotate(40,
250, 250)" />
<use xlink:href="#triangle" transform="rotate(60,
250, 250)" />
<use xlink:href="#triangle" transform="rotate(80,
250, 250)" />
<use xlink:href="#triangle" transform="rotate(100,
250, 250)" />
<use xlink:href="#triangle" transform="rotate(120,
250, 250)" />
<use xlink:href="#triangle" transform="rotate(140,
250, 250)" />
<use xlink:href="#triangle" transform="rotate(160,
250, 250)" />
<use xlink:href="#triangle" transform="rotate(180,
250, 250)" />
<use xlink:href="#triangle" transform="rotate(-20,
250, 250)" />
<use xlink:href="#triangle" transform="rotate(-40,
250, 250)" />
<use xlink:href="#triangle" transform="rotate(-60,
250, 250)" />
<use xlink:href="#triangle" transform="rotate(-80,
250, 250)" />
<use xlink:href="#triangle" transform="rotate(-100,
250, 250)" />
<use xlink:href="#triangle" transform="rotate(-120,
250, 250)" />
<use xlink:href="#triangle" transform="rotate(-140,
250, 250)" />
<use xlink:href="#triangle" transform="rotate(-160,
250, 250)" />
Il nous reste à animer tout cela. D'ores et déjà,
nous avons abouti à
ceci.
Animation
Pour le texte, nous allons appliquer deux transformations: la première
consiste à déplacer le coin supérieur gauche
du premier caractère du texte, la seconde à augmenter
la taille globale des caractères. Pour cela nous allons utiliser
l'élément animateMotion (pour le déplacement)
et l'élément animateTransform (pour l'agrandissement):
<animateMotion path="m0,0l60,229"
begin="0.3s" dur="2s" fill="freeze"
/>
<animateTransform attributeName="transform" attributeType="XML"
type="scale" from="1" to="3" begin="0.3s"
dur="2s" fill="freeze" />
Le premier élément repose sur un "chemin"
défini par l'attribut "path" (nous ne revenons
pas sur la syntaxe). Nous définissons en outre le moment
de début de l'animation et la durée de celle-ci. Enfin,
l'attribut "fill" indique ici que l'animation doit
se figer (freeze) quand elle se termine. Autrement, la position
de départ s'afficherait de nouveau.
Le deuxième élément applique une transformation
(attribut XML "transform" de l'élement "text")
de type "scale" (mise à l'échelle),
sur la même plage de temps. Ici, il s'agit de multiplier par
3 la taille du texte.
Nous insérons ces deux balises au sein de l'élément
texte, comme suit:
<text font-family="Verdana" font-size="8pt"
fill="url(#degrade)" x="10" y="10">
JDNet Développeurs
<animateMotion path="m0,0l60,229" begin="0.3s"
dur="2s" fill="freeze" />
<animateTransform attributeName="transform" attributeType="XML"
type="scale" from="1" to="3" begin="0.3s"
dur="2s" fill="freeze" />
</text>
Pour la forme circulaire à base de triangles, nous allons
appliquer une animation à un triangle (notre élément
réutilisable), et elle sera ensuite répercutée
pour chaque rotation. Nous écrivons donc:
<defs>
<path id="triangle" d="M240,280l20,0 -10,20z"
style="fill: #DDDDDD; stroke: #333333; stroke-width: 2">
<animateMotion path="m0,0l0,-230" begin="0.3s"
dur="2s" fill="freeze" />
</path>
</defs>
Finalement, le document SVG final sera le suivant:
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20001102//EN"
"http://www.w3.org/TR/2000/CR-SVG-20001102/DTD/svg-20001102.dtd">
<svg width="500" height="500">
<defs>
<path id="triangle" d="M240,280l20,0 -10,20z"
style="fill: #DDDDDD; stroke: #333333; stroke-width: 2">
<animateMotion path="m0,0l0,-230" begin="0.3s"
dur="2s" fill="freeze" />
</path>
<linearGradient id="degrade">
<stop offset="0%" style="stop-color:#660000"/>
<stop offset="100%" style="stop-color:#CCCCCC"/>
</linearGradient>
</defs>
<use xlink:href="#triangle" transform="rotate(0,
250, 250)" />
<use xlink:href="#triangle"
transform="rotate(20, 250, 250)" />
<use xlink:href="#triangle" transform="rotate(40,
250, 250)" />
<use xlink:href="#triangle" transform="rotate(60,
250, 250)" />
<use xlink:href="#triangle" transform="rotate(80,
250, 250)" />
<use xlink:href="#triangle" transform="rotate(100,
250, 250)" />
<use xlink:href="#triangle" transform="rotate(120,
250, 250)" />
<use xlink:href="#triangle" transform="rotate(140,
250, 250)" />
<use xlink:href="#triangle" transform="rotate(160,
250, 250)" />
<use xlink:href="#triangle" transform="rotate(180,
250, 250)" />
<use xlink:href="#triangle" transform="rotate(-20,
250, 250)" />
<use xlink:href="#triangle" transform="rotate(-40,
250, 250)" />
<use xlink:href="#triangle" transform="rotate(-60,
250, 250)" />
<use xlink:href="#triangle" transform="rotate(-80,
250, 250)" />
<use xlink:href="#triangle" transform="rotate(-100,
250, 250)" />
<use xlink:href="#triangle" transform="rotate(-120,
250, 250)" />
<use xlink:href="#triangle" transform="rotate(-140,
250, 250)" />
<use xlink:href="#triangle" transform="rotate(-160,
250, 250)" />
<text font-family="Verdana"
font-size="8pt" fill="url(#degrade)" x="10"
y="10">
JDNet Développeurs
<animateMotion path="m0,0l60,229" begin="0.3s"
dur="2s" fill="freeze" />
<animateTransform attributeName="transform" attributeType="XML"
type="scale" from="1" to="3" begin="0.3s"
dur="2s" fill="freeze" />
</text>
</svg>
|
[