La balise circle de SVG

cercles avec SVG - balise circle

Faites un clic droit sur l'image vectorielle. Dans le menu contextuel la commande "enregistrer l'image sous ..." n'apparaît pas.
En effet ici il ne s'agit pas d'un fichier SVG incorporé dans la page via la balise img. Dans cette page le code SVG est écrit directement dans la page.

le code de la page (extraits)

... <style> svg {display : block ; margin : 5px auto 5px auto ; border : 1px solid black ;} </style> ... <body> ... <svg height="200" width="400" > <title>cercles avec SVG - balise circle </title> <circle cx="100" cy="100" r="80" fill="olive" /> <circle cx="150" cy="100" r="80" fill="aqua" fill-opacity="0.5" /> <circle cx="300" cy="100" r="40" stroke="navy" stroke-width="20" fill="none" stroke-opacity="0.5" /> <circle cx="340" cy="100" r="40" style = "stroke : navy ; stroke-width : 10px ; fill : aqua " /> </svg> ...

Commentaire du code

Pour dessiner un cercle il faut utiliser la balise circle du format SVG.

Comme nous avons vu dans la page précédente il est inutile de préciser l'unité de mesure si nous raisonnons en pixels !

Nous avons vu dans la page précédente que les formes SVG ont par défaut un fond noir ! Or ici le premier cercle a un fond vert "olive", le second a un fond "aqua" mais à demi transparent, le troisième cercle a un contour "navy" mais à demi transparent et le quatrième cercle a un fond "aqua" avec un contour "navy". Nous avons à cette fin utiliser les attributs de mise en forme.

Attention si vous dessinez un cercle de rayon 40px dont l'épaisseur du contour est 20px le rayon effectif de cette forme sera 50px ! En effet le contour est à la moitié à l'intérieur de la forme et à moitié à l'extérieur de la forme.

Pour les attributs fill-opacity, stroke-opacity la valeur va de 1(opacité totale) à 0 (transparence totale).

Les termes énumérés précédemment (fill, stroke, stroke-width, etc.) peuvent être aussi utilisés comme propriétés !
Ainsi pour colorier le quatrième cercle on utilise les termes stroke, stroke-width, fill comme propriétés de l'attribut style !

Si, par exemple, vous voulez un cercle rempli de vert et borduré de rouge avec une bordure de 5 pixels vous pouvez donc écrire :
< circle ... fill = 'green' stroke-width = '5px' stroke = 'red' />
ou bien : < circle ... style = "fill : green ; stroke-width : 5px ; stroke : red ; " />

Si vous souhaitez que tous les cercles aient le même style vous pouvez bien sûr créer une règle CSS à l'intérieur de la feuille de style interne à la page. Par exemple : circle {fill : green ; stroke-width : 5px ; stroke : red ; }

Vous pouvez aussi définir dans la feuille de style interne des classes applicables à des objets SVG.
Par exemple : .demi_opaque {fill-opacity : 0.5 ; stroke-opacity : 0.5 ; }
Pour appliquer cette transparence à un objet SVG il n'y a qu'à utiliser l'attribut class avec la valeur "demi_opaque".

Zoomez la page à 500% et vous constatez qu'il n'y a pas l'effet "crénelage" comme avec une image matricielle.
Retour menu