Demo 7: SVG & Animations
Exercice de la semaine
Aides mémoires + ressources de la semaine
Tuto SVG sur W3Schools
La discussion sur les pixels: pourquoi MS Paint est horrible (ms paint en ligne)
Quelques éléments SVG
Cercle
cx, cy sont les coordonnées x,y du centre du cercle, r est le rayon
x
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<circle cx="100" cy="100" r="100" />
</svg>
Ellipse
cx, cy sont les coordonnées x,y du centre de l'ellipse, rx, ry sont les longueurs x,y du rayon
x
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<ellipse cx="100" cy="100" rx="100" ry="50" />
</svg>
Rectangle (rappel: un carré est un rectangle)
x, y sont les coordonnées du coin supérieur gauche du rectangle, width, height: largeur, hauteur, rx, ry c'est si vous voulez donner des coins ronds (parce qu'on aime ça les coins ronds hihi)
x
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<rect x="0" y="0" width="256" height="64" rx="5" ry="5" />
</svg>
Polygones
Ici on donne les coordonnées relatives du polygone. Notez que chaque polygone a son système de coordonnées à lui et n'a rien à voir avec le système de coordonnées du site web, voir note sur les coordonnées ci-dessus.
x
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Un triangle -->
<polygon points="128,0 256,256 0,256" />
<!-- Un hexagone -->
<polygon points="60,20 100,40 100,80 60,100 20,80 20,40" />
</svg>
SVG Mondrian
Mondrian, Composition with Red, Blue, and Yellow
(Optionnel, pas évalué). Je vous donne le challenge de reproduire ceci en SVG! (faire au moins une partie de ceci va vraiment vous aider pour le devoir).
Je vous donne un peu de code pour commencer, a vous de finir le reste :)
xxxxxxxxxx
<!-- couleurs:
rouge: #DA1F26
bleu: #4060AD
blanc: #FFFFFF
jaune: #FFCA1C
(vous pouvez aussi utiliser red, blue, yellow, white si vous etes paresseux.se)
-->
<svg width="600" height="600" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- rectangle rouge, de largeur, hauteur 500px (le px est implicite) -->
<!-- remarquez que comme j'ai mis le contour de 20px de largeur,
j'ai mis mon rectangle rouges a 20px vers le haut et vers la droite pour ne pas qu'on voit les contours sur les cotes -->
<rect
x="120" y="-20" width="500" height="500"
fill="#DA1F26"
stroke="black" stroke-width="20"/>
</svg>
Note sur les coordonnées en SVG
Cette manière de noter les coordonnées est très courante!
✨Les animations✨
Voir la ressource sur le guide des animations SVG dans les ressources de cette semaine!!
Cliquez sur le cercle orange ici :D
<svg width="500" height="100">
<circle id="orange-circle" r="30" cx="50" cy="50" fill="orange" />
<animate
xlink:href="#orange-circle"
attributeName="cx"
from="50"
to="450"
dur="1s"
begin="click"
fill="freeze" />
</svg>
Enchaîner les animations
x
<svg width="500" height="350">
<circle id="green-circle" r="30" cx="50" cy="50" fill="green" />
<rect id="blue-rectangle" width="50" height="50" x="25" y="200" fill="#0099cc"></rect>
<animate
xlink:href="#green-circle"
attributeName="cx"
from="50"
to="450"
dur="5s"
begin="click"
fill="freeze"
id="circ-anim"/>
<animate
xlink:href="#blue-rectangle"
attributeName="x"
from="50"
to="425"
dur="5s"
begin="circ-anim.begin + 1s"
fill="freeze"
id="rect-anim"/>
</svg>
