Rectangle SVG - Apprendre le HTML

L'élément SVG <rect> dessine un rectangle. C'est l'une des formes SVG de base (aux côtés de <circle>, <ellipse>, <line> et <polygon>) et il est placé directement à l'intérieur d'un élément <svg>. Cette page explique comment positionner et dimensionner un rectangle, comment arrondir ses coins, et comment contrôler son remplissage et son contour à l'aide d'attributs de présentation ou de CSS.

Si SVG est nouveau pour vous, commencez par l'introduction au SVG. Pour une liste complète des attributs et éléments, consultez la référence SVG.

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

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

Le système de coordonnées SVG

Un rectangle est positionné avec les attributs x et y, mesurés depuis le coin supérieur gauche du canevas SVG. L'axe des x croît vers la droite et l'axe des y croît vers le bas (ainsi, une valeur y plus grande déplace la forme vers le bas de l'écran). Ces coordonnées sont exprimées en unités utilisateur, qui par défaut correspondent aux pixels mais peuvent être remappées avec l'attribut viewBox. Les attributs principaux de <rect> sont :

x — la position horizontale du bord gauche du rectangle. Par défaut, 0 si omis.
y — la position verticale du bord supérieur du rectangle. Par défaut, 0 si omis.
width — la largeur du rectangle. Par défaut 0, ce qui rend le rectangle invisible ; vous devez donc presque toujours le définir.
height — la hauteur du rectangle. Également 0 par défaut (invisible).
rx — le rayon horizontal utilisé pour arrondir les coins (optionnel).
ry — le rayon vertical utilisé pour arrondir les coins (optionnel).

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

<!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>

Essayez vous-même »

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.

Attributs de présentation vs. CSS

Les styles fill, stroke et stroke-width ci-dessus peuvent également être écrits comme attributs de présentation directement sur l'élément, au lieu d'être placés dans un attribut style. Les deux extraits ci-dessous sont équivalents :

<!-- Using a CSS style attribute -->
<rect width="250" height="110"
      style="fill:green;stroke:darkgray;stroke-width:5" />

<!-- Using presentation attributes -->
<rect width="250" height="110"
      fill="green" stroke="darkgray" stroke-width="5" />

Les attributs de présentation sont pratiques et lisibles, mais ils ont la priorité la plus basse : toute règle CSS correspondante (dans une feuille de styles ou un attribut style) les remplace. Utilisez les attributs de présentation pour des formes simples et statiques, et CSS lorsque vous souhaitez réutiliser des styles ou les modifier au survol. Pour en savoir plus sur les bordures, consultez SVG stroking.

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

<!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>

Essayez vous-même »

Expliquons le code ci-dessus :

L'attribut x spécifie la position gauche du rectangle.
L'attribut y spécifie la position supérieure 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 du contour.

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

<!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>

Essayez vous-même »

Expliquons le code ci-dessus :

La propriété CSS opacity définit la transparence du rectangle entier — à la fois le remplissage et le contour ensemble — où 1 est totalement opaque et 0 est totalement transparent.
Cela diffère de l'exemple précédent : fill-opacity et stroke-opacity rendent le remplissage et la bordure transparents indépendamment, tandis qu'opacity s'applique à l'élément comme une unité unique (ainsi, un contour et un remplissage qui se chevauchent se fondent avec ce qui se trouve derrière la forme, pas entre eux).

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

<!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>

Essayez vous-même »

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.

La règle de copie rx/ry (point important) : si vous ne définissez qu'un seul de ces attributs, le navigateur utilise la même valeur pour l'autre. Ainsi, rx="30" sans ry produit des coins arrondis de 30 dans les deux directions — exactement comme si vous aviez écrit rx="30" ry="30". Pour obtenir des coins véritablement elliptiques (asymétriques), vous devez donner des valeurs différentes à rx et ry. Si aucun n'est défini, les coins restent carrés. Chaque rayon est également limité à la moitié de la largeur (rx) ou de la hauteur (ry) du rectangle au maximum.

Chapitres SVG associés

Introduction au SVG — l'élément <svg>, le système de coordonnées et viewBox.
SVG stroking — contrôlez les bordures avec stroke, stroke-width et les tirets.
SVG polygon — dessinez des formes à plusieurs côtés à partir d'une liste de points.
Référence SVG — tous les éléments et attributs SVG en un seul endroit.

Pratique

Si un rectangle SVG a rx='40' mais aucun attribut ry défini, comment ses coins sont-ils arrondis ?

ry prend par défaut la valeur 0, donc les coins restent carrésry copie rx, donc les coins sont arrondis de 40 dans les deux directionsLe rectangle n'est pas rendu du toutry prend par défaut la moitié de la hauteur du rectangle

Description de l'élément <rect>

Le système de coordonnées SVG

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

Attributs de présentation vs. CSS

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 :

Chapitres SVG associés

Pratique

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 :