SVG <rect>

Formes SVG

SVG offre quelques éléments de forme prédéfinis disponibles pour les développeurs :

• Rectangle <rect>
• Cercle <circle>
• Ellipse <ellipse>
• Ligne droite <line>
• Courbe en dents de scie <polyline>
• Polygone <polygon>
• Chemin <path>

Les prochaines sections commenceront par l'élément rect pour expliquer chaque élément.

SVG Rectangle - <rect>

Exemple 1

<rect> L'élément est utilisé pour créer des rectangles et des variantes de formes rectangulaires :

Voici le code SVG :

<svg width="400" height="110">
  <rect width="300" height="100" style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)" />
</svg>

Essayer par vous-même

Explication du code :

• Les attributs width et height de l'élément <rect> définissent la hauteur et la largeur du rectangle
• L'attribut style est utilisé pour définir les attributs CSS du rectangle
• L'attribut fill de CSS définit la couleur de remplissage du rectangle
• L'attribut border-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

Exemple 2

Voyons un autre exemple contenant de nouveaux attributs :

Voici le code SVG :

<svg width="400" height="180">
  <rect x="50" y="20" width="150" height="150"
  style="fill:blue;stroke:pink;stroke-width:5;fill-opacity:0.1;stroke-opacity:0.9" />
</svg>

Essayer par vous-même

Explication du code :

• L'attribut x définit la position latérale du rectangle (par exemple, x="50" place le rectangle à 50 px de la marge externe gauche)
• L'attribut y définit la position supérieure du rectangle (par exemple, y="20" place le rectangle à 20 px de la marge externe supérieure)
• L'attribut fill-opacity de CSS définit la transparence de la couleur de remplissage (plage légale : 0 à 1)
• L'attribut border-opacity de CSS définit la transparence de la couleur du trait (plage légale : 0 à 1)

Exemple 3

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

Voici le code SVG :

<svg width="400" height="180">
  <rect x="50" y="20" width="150" height="150"
  style="fill:blue;stroke:pink;stroke-width:5;opacity:0.5" />
</svg>

Essayer par vous-même

Explication du code :

• L'attribut opacity de CSS définit la transparence de l'élément entier (plage légale : 0 à 1)

Exemple 4

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

Voici le code SVG :

<svg width="400" height="180">
  <rect x="50" y="20" rx="20" ry="20" width="150" height="150"
  style="fill:red;stroke:black;stroke-width:5;opacity:0.5" />
</svg>

Essayer par vous-même

Explication du code :

• Les propriétés rx et ry rendent les coins du rectangle arrondis