SVG <rect>

SVG a certains éléments de forme prédéfinis, utilisés et manipulés par les développeurs.

Les formes SVG

SVG a certains éléments de forme prédéfinis, utilisés et manipulés par les développeurs :

  • Le rectangle <rect>
  • Le cercle <circle>
  • L'ellipse <ellipse>
  • La ligne <line>
  • La polyline <polyline>
  • Le polygone <polygon>
  • Le chemin <path>

Les chapitres suivants vous expliqueront ces éléments, commençant par l'élément rectangle.

L'étiquette <rect>

L'étiquette <rect> peut être utilisée pour créer un rectangle et ses variantes.

Pour comprendre le principe de fonctionnement, copiez ce code dans un bloc-notes, puis enregistrez-le sous le fichier "rect1.svg". Placez ce fichier dans le répertoire web :

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<rect width="300" height="100"
style="fill:rgb(0,0,255);stroke-width:1;
stroke:rgb(0,0,0)"/>
</svg>

Explication du code :

  • Les attributs width et height de l'élément rect peuvent définir la hauteur et la largeur du rectangle
  • L'attribut style est utilisé pour définir les attributs CSS
  • L'attribut fill de CSS définit la couleur de remplissage du rectangle (valeur rgb, nom de couleur ou valeur hexadécimale)
  • L'attribut stroke-width de CSS définit la largeur de la bordure du rectangle
  • L'attribut stroke de CSS définit la couleur de la bordure du rectangle

Voir cet exemple

Voyons un autre exemple contenant de nouvelles propriétés :

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<rect x="20" y="20" width="250" height="250"
style="fill:blue;stroke:pink;stroke-width:5;
fill-opacity:0.1;stroke-opacity:0.9"/>
</svg>

Explication de l'exemple :

  • L'attribut x définit la position de la gauche du rectangle (par exemple, x="0" définit la distance du rectangle à la gauche de la fenêtre du navigateur est de 0px)
  • L'attribut y définit la position du sommet du rectangle (par exemple, y="0" définit la distance du rectangle au sommet de la fenêtre du navigateur est de 0px)
  • L'attribut fill-opacity de CSS définit la transparence de la couleur de remplissage (la plage légitime est : 0 - 1)
  • L'attribut stroke-opacity de CSS définit la transparence de la couleur du trait (la plage légitime est : 0 - 1)

Voir l'exemple

Définir la transparence de l'élément entier :

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<rect x="20" y="20" width="250" height="250"
style="fill:blue;stroke:pink;stroke-width:5;
opacity:0.9"/>
</svg>

Explication du code :

L'attribut opacity de CSS définit la valeur de transparence de l'élément entier (la gamme légitime est : 0 - 1)

Voir l'exemple

Dernier exemple, création d'un rectangle avec des coins arrondis :

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<rect x="20" y="20" rx="20" ry="20" width="250"
height="100" style="fill:red;stroke:black;
stroke-width:5;opacity:0.5"/>
</svg>

Explication du code :

Les attributs rx et ry permettent de créer des coins arrondis pour les rectangles.

Voir l'exemple