SVG <rect>

Formes SVG

SVG a des éléments de forme prédéfinis qui peuvent être utilisés par les développeurs :

• rectangle <rectangle>
• Cercle <cercle>
• Ellipse <ellipse>
• Ligne <ligne>
• Polyligne <polyligne>
• Polygone <polygone>
• Chemin <chemin>

Les chapitres suivants expliqueront chaque élément, en commençant par l'élément rect.

Rectangle SVG - <rect>

Exemple 1

L'élément <rect> est utilisé pour créer un rectangle et des variantes d'une forme de rectangle :

Voici le code SVG :

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 propriétés CSS du rectangle
• La propriété CSS fill définit la couleur de remplissage du rectangle
• La propriété CSS stroke-width définit la largeur de la bordure du rectangle
• La propriété CSS stroke définit la couleur de la bordure du rectangle

Exemple 2

Regardons un autre exemple qui contient de nouveaux attributs :

Voici le code SVG :

Explication du code :

• L'attribut x définit la position gauche du rectangle (par exemple x="50" place le rectangle à 50 px de la marge gauche)
• L'attribut y définit la position du haut du rectangle (par exemple y="20" place le rectangle à 20 px de la marge du haut)
• La propriété CSS fill-opacity définit l'opacité de la couleur de remplissage (plage légale : 0 à 1)
• La propriété CSS stroke-opacity définit l'opacité de la couleur du trait (plage légale : 0 à 1)

Exemple 3

Définissez l'opacité de l'élément entier :

Voici le code SVG :

Explication du code :

• La propriété CSS opacity définit la valeur d'opacité pour l'ensemble de l'élément (plage légale : 0 à 1)

Exemple 4

Dernier exemple, créez un rectangle aux coins arrondis :

Voici le code SVG :

Explication du code :

• Les attributs rx et ry arrondissent les coins du rectangle