SVG <rect>

SVG (Scalable Vector Graphics)<rect>L'élément est utilisé pour dessiner des rectangles et est l'une des formes de base courantes en SVG. Il vous permet de dessiner des rectangles et de contrôler la position, la taille, les coins arrondis et d'autres styles du rectangle en définissant des attributs.

Syntaxe de base

<rect
  x="x-coordinate"        <!-- 矩形左上角的 x 坐标 -->
  y="y-coordinate"        <!-- 矩形左上角的 y 坐标 -->
  width="width-value"     <!-- 矩形的宽度 -->
  height="height-value"   <!-- 矩形的高度 -->
  rx="rx-value"           <!-- 矩形的圆角半径（水平方向） -->
  ry="ry-value"           <!-- 矩形的圆角半径（垂直方向） -->
  fill="fill-color"       <!-- 矩形的填充颜色 -->
  stroke="stroke-color"   <!-- 矩形的描边颜色 -->
  stroke-width="width-value" <!-- 矩形的描边宽度 -->
/>

Détail des attributs :

• xetyLes attributs spécifient les coordonnées du coin supérieur gauche du rectangle, c'est-à-dire le point de départ du rectangle.

• widthetheightLes attributs définissent la largeur et la hauteur du rectangle.

• rxetryLes attributs sont utilisés pour spécifier le rayon d'arrondi des coins du rectangle. Si l'on ne définit querxalors le rayon d'arrondi de tous les coins est le même ; si l'on définit les deux en même tempsrxetryvous pouvez spécifier respectivement les rayons d'arrondi horizontaux et verticaux.

• fillL'attribut définit la couleur de remplissage du rectangle.

• strokeL'attribut définit la couleur de contour du rectangle.

• stroke-widthL'attribut définit la largeur du contour du rectangle.

Le code suivant dessine un rectangle avec un remplissage bleu, un contour noir et une largeur de contour de 2 pixels. La coordonnée du coin supérieur gauche est (50, 50), la largeur est 100 et la hauteur est 80.

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <rect x="50" y="50" width="100" height="80" fill="blue" stroke="black" stroke-width="2" />
</svg>

Exemple 1

Voici le code SVG :

Cliquez pour voir :Voir le fichier SVG.

Analyse 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 des propriétés 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.

Exemple 2

Regardons un autre exemple qui contient de nouveaux attributs :

Cliquez pour voir :。

Analyse du code :

• L'attribut x définit la position gauche du rectangle (par exemple, x="0" définit la distance entre le rectangle et le bord gauche de la fenêtre du navigateur à 0px).
• L'attribut y définit la position supérieure du rectangle (par exemple, y="0" définit la distance entre le rectangle et le bord supérieur de la fenêtre du navigateur à 0px).
• L'attribut fill-opacity de CSS définit la transparence de la couleur de remplissage (plage valide : 0 - 1).
• L'attribut stroke-opacity de CSS définit la transparence de la couleur du contour (plage valide : 0 - 1).

Exemple 3

Définir l'opacité de tout l'élément :

Voici le code SVG :

Pour les utilisateurs d'Opera :。

• L'attribut CSS opacity est utilisé pour définir la valeur de transparence de l'élément (plage : 0 à 1).

Exemple 4

Le dernier exemple crée un rectangle arrondi :

Voici le code SVG :

Pour les utilisateurs d'Opera :。

• Les attributs rx et ry peuvent créer des coins arrondis pour le rectangle.