Pour dessiner dans la zone créée dans l'activité précédente, nous allons utiliser des balises, voici quelques exemples :
Commençons par nous intéresser à la balise <circle/> qui, comme vous l'avez sans doute deviné, permet de dessiner un cercle !
Problème, un cercle à un rayon, où va-t-on renseigner cette information ?
Il est possible de rajouter des attributs dans les balises. Pour définir le rayon du cercle nous écrirons : <circle r="40"/>
Nous avons ajouté un attribut r à notre balise, le cercle aura donc un rayon de 40 pixels.
Il est aussi possible de renseigner les coordonnées du centre du cercle grâce aux attributs "cx" et "cy" : <circle r="40" cx="400" cy="300"/>
ATTENTION : ci-dessus, 400 et 300 correspondent aux coordonnées du centre du cercle sachant que l'origine du repère (le point de coordonnées (0,0)), se trouve dans le coin supérieur gauche de la zone de dessin définie grâce à la balise <svg>
Compléter le fichier "index.html" comme suit :
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Dessiner avec svg</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<svg id="dessin">
<circle r="40" cx="400" cy="300"/>
</svg>
</body>
</html>
Le fichier "style.css" reste identique à celui vu dans l'activité 1.
Tester cet exemple en effectuant un "double-clic" sur le fichier "index.html".
En repartant de l'exemple précédent, modifiez les attributs "r", "cx" et "cy" afin de modifier la taille et la position du cercle.
Tester vos modifications.
Il est possible de modifier la couleur du cercle à l'aide des attributs "stroke" et "fill" :
Compléter le fichier "index.html" comme suit :
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Dessiner avec svg</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<svg id="dessin">
<circle r="40" cx="400" cy="300" fill="green" stroke="red"/>
</svg>
</body>
</html>
Le fichier "style.css" reste identique à celui vu dans l'activité 1.
Tester cet exemple en effectuant un "double-clic" sur le fichier "index.html".
Au lieu de nommer les couleurs, il est possible de renseigner les canaux rouge, vert et bleu :
par exemple, fill="rgb(255,0,0)" donnera une couleur de remplissage rouge.
Pour en savoir plus sur les canaux rouge, vert et bleu, n'hésitez pas à consulter cette page.
En repartant de l'exemple précédent, modifier les couleurs de remplissage et de contour, en utilisant les canaux rouge, vert et bleu.
Il est possible de joueur sur l'opacité (transparence) avec les attributs "fill-opacity" et "stroke-opacity". Les valeurs de ces attributs varient entre 0 (totalement transparent) et 1 (totalement opaque).
Modifiez l'exemple précédent en ajoutant les attributs "fill-opacity" et "stroke-opacity". Vous choisirez les valeurs de ces 2 attributs comme bon vous semble.
Il est possible de modifier l'épaisseur du trait de contour avec l'attribut "stroke-width", par exemple stroke-width="5" permettra d'avoir un contour de 5 pixels.
Reprenez l'exemple précédent en modifiant l'épaisseur du trait de contour en ajoutant l'attribut "stroke-width".