Rectangle SVG

Description de l'élément `<rect>`

L'élément SVG <rect> crée un rectangle, ainsi que des variantes de formes rectangulaires. Il est possible de dessiner des rectangles de différentes hauteurs et largeurs, avec des couleurs de contour et de remplissage différentes, etc. Nous allons essayer quelques exemples.

Exemple de l'élément SVG `<rect>` :

Exemple de l'élément SVG <rect> :

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <svg width="350" height="120">
      <rect width="250" height="110" style="fill:rgb(53, 153, 0);stroke-width:1;stroke:rgb(32, 33, 49)" />
    </svg>
  </body>
</html>

Try it Yourself »

Expliquons maintenant ce code :

Les attributs width et height spécifient la largeur et la hauteur du rectangle.
L'attribut style spécifie certaines propriétés CSS pour le rectangle.
La propriété CSS fill spécifie la couleur de remplissage du rectangle.
La propriété CSS stroke-width est utilisée pour spécifier la largeur de la bordure du rectangle.
La propriété CSS stroke spécifie la couleur de la bordure du rectangle.

Exemple de l'élément SVG `<rect>` avec les attributs x et y :

Exemple de l'élément SVG <rect> avec les attributs x et y

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <svg width="400" height="250">
      <rect x="80" y="50" width="180" height="180" style="fill:lightcoral;stroke:purple;stroke-width:5;fill-opacity:0.1;stroke-opacity:0.9" />
      Sorry, inline SVG isn't supported by your browser.  
    </svg>
  </body>
</html>

Try it Yourself »

Expliquons le code ci-dessus :

L'attribut x spécifie la position gauche du rectangle.
L'attribut y spécifie la position haute du rectangle.
Par défaut, si x et y sont omis, ils sont définis à 0.
La propriété CSS fill-opacity spécifie l'opacité de la couleur de remplissage.
La propriété CSS stroke-opacity spécifie l'opacité de la couleur de contour.

Exemple de l'élément SVG `<rect>` avec la propriété CSS opacity :

Exemple de l'élément SVG <rect> avec la propriété CSS opacity

html

<!DOCTYPE html>
<html>
  <body>
    <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" />
      Sorry, inline SVG is not supported by your browser.  
    </svg>
  </body>
</html>

Try it Yourself »

Exemple de l'élément SVG `<rect>` avec les attributs rx et ry :

Exemple de l'élément SVG <rect> avec les attributs rx et ry

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <svg width="350" height="240">
      <rect x="70" y="50" rx="30" ry="30" width="170" height="170" style="fill:green;stroke:darkgray;stroke-width:5;opacity:0.7" />
      Sorry, inline SVG isn't supported by your browser.
    </svg>
  </body>
</html>

Try it Yourself »

Expliquons le code ci-dessus :

L'attribut rx spécifie le rayon horizontal des coins arrondis du rectangle.
L'attribut ry spécifie le rayon vertical des coins arrondis du rectangle.

Pratique

Quels attributs peuvent être spécifiés pour les rectangles SVG en HTML ?

'x' et 'y' pour déterminer le point de départ'width' et 'height' pour définir la taille'color' et 'background-color' pour définir l'apparence'rx' et 'ry' pour arrondir les coins'src' et 'alt' pour la référence d'image et l'accessibilité

Rectangle SVG ​

Description de l'élément <rect> ​

Exemple de l'élément SVG <rect> : ​

Exemple de l'élément SVG <rect> avec les attributs x et y : ​

Exemple de l'élément SVG <rect> avec la propriété CSS opacity : ​

Exemple de l'élément SVG <rect> avec les attributs rx et ry : ​

Pratique ​

Rectangle SVG

Description de l'élément `<rect>`

Exemple de l'élément SVG `<rect>` :

Exemple de l'élément SVG `<rect>` avec les attributs x et y :

Exemple de l'élément SVG `<rect>` avec la propriété CSS opacity :

Exemple de l'élément SVG `<rect>` avec les attributs rx et ry :

Pratique