Pour dessiner dans la zone créée dans l’activité précédente, nous allons utiliser des balises, voici quelques exemples :
- <circle/>
- <rect/>
- <line/>
- <path/>
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>
À faire vous même 2.1
Compléter le fichier « index.html » comme suit :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<!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 ».
À faire vous même 2.2
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 » :
- « stroke » correspond à la couleur de contour
- « fill » correspond à la couleur de remplissage
À faire vous même 2.3
Compléter le fichier « index.html » comme suit :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<!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.
À faire vous même 2.4
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).
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.
À faire vous même 2.5
Modifiez l’exemple précédent en ajoutant les attributs « fill-opacity » et « stroke-opacity » et en modifiant l’épaisseur du trait de contour en ajoutant l’attribut « stroke-width ». Vous choisirez les valeurs de ces attributs comme bon vous semble.