Dessiner un rectangle avec SVG <rect>

L'élément rect est une forme de base de SVG, utilisé pour créer des rectangles basés sur une position d'un coin et ses dimensions de largeur et de hauteur. Il peut également être utilisé pour créer des rectangles arrondis.

L'élément <rect> SVG représente un rectangle. Utilisez cet élément pour dessiner des rectangles à diverses largeurs, hauteurs, couleurs de contours (profiles) et couleurs de remplissage, des coins arrondis ou des coins aigus, etc.

Exemple en ligne

Exemple d'utilisation de rect

<svg　xmlns="http://www.w3.org/2000/svg"
　　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　　　　<rect　x="10"　y="10"　height="100"　width="100"
　　　　　　　　style="stroke:#006600;　fill:　#00cc00"/></svg>

La position du rectangle est déterminée par les attributs x et y. N'oubliez pas que cette position est par rapport à tout élément fermé (parent) en termes de position.
La taille du rectangle est déterminée par les attributs width et height.
L'attribut de style permet de définir d'autres informations de style, telles que la couleur de trait et de remplissage, la largeur du trait, etc. Cela sera décrit en détail dans d'autres textes.
Voici l'image du rectangle généré :

Rectangle arrondi

Vous pouvez dessiner des coins arrondis sur le rectangle. Les attributs rx et ry déterminent le coin arrondi. L'attribut rx détermine la largeur de l'arrondi, tandis que l'attribut ry détermine la hauteur. Voici trois rectangles avec rx et ry définis sur5，10et15。Notez les différentes tailles arrondies.

<svg　xmlns="http://www.w3.org/2000/svg"
　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　　　<rect　x="10"　y="10"　height="50"　width="50"
　　　　　　　　　　rx="5"　ry="5"
　　　　　　　　　　style="stroke:#006600;　fill:　#00cc00"/>
　　　　<rect　x="70"　y="10"　height="50"　width="50"
　　　　　　　　　　rx="10"　ry="10"
　　　　　　　　　　style="stroke:#006600;　fill:　#00cc00"/>
　　　　<rect　x="130"　y="10"　height="50"　width="50"
　　　　　　　　　　rx="15"　ry="15"
　　　　　　　　　　style="stroke:#006600;　fill:　#00cc00"/>
</svg>

L'effet du rectangle arrondi généré est le suivant :

Dans ces exemples, rx et ry de chaque rectangle sont définis sur la même valeur. Si seul l'attribut rx est défini, l'attribut ry reçoit la même valeur que rx. C'est un raccourci pour définir des coins arrondis uniformes.
Voici deux rectangles où les attributs rx sont tous deux définis sur10，mais avec les attributs ry respectivement définis sur5et15démonstration. Cela vous montrera l'apparence du rectangle arrondi à différentes hauteurs et largeurs.

<svg　xmlns="http://www.w3.org/2000/svg"
　　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　　　<rect　x="10"　y="10"　height="50"　width="50"
　　　　　　　　　　rx="10"　ry="5"
　　　　　　　　　　style="stroke:#006600;　fill:　#00cc00"/>
　　　　<rect　x="130"　y="10"　height="50"　width="50"
　　　　　　　　　　rx="10"　ry="15"
　　　　　　　　　　style="stroke:#006600;　fill:　#00cc00"/>
</svg>

Contour du rectangle

Vous pouvez utiliser l'attribut de style stroke SVG pour définir le style du contour du rectangle. Dans cet exemple, la couleur de stroke est définie en vert foncé, et la largeur de la bordure est réglée sur3:

<svg　xmlns="http://www.w3.org/2000/svg"　xmlns:xlink="http://www.w3.org/1999/xlink">　
<rect　x="20"　y="20"　width="100"　height="100"
　　　　　　style="stroke:　#009900;
　　　　　　　　　　　　　stroke-width:　3;
　　　　　　　　　　　　　fill:　none;
　　　　　　"
　　　　　　/></svg>

L'effet de l'élément rect visible dans le navigateur est le suivant :

Vous pouvez également utiliser l'attribut de style stroke-dasharray rend le bord du rectangle en pointillés. Voici un exemple :

<svg　xmlns="http://www.w3.org/2000/svg"　xmlns:xlink="http://www.w3.org/1999/xlink">　
<rect　x="20"　y="20"　width="100"　height="100"
　　　　　　style="stroke:　#009900;
　　　　　　　　　　　　　stroke-width:　3;
　　　　　　　　　　　　　stroke-dasharray:　10　5;
　　　　　　　　　　　　　fill:　none;
　　　　　　　　　　　　"
　　　　　　　　/></svg>

L'effet de l'exécution du code suivant est le suivant::

Remplissage du rectangle

Vous pouvez utiliser l'attribut de style de remplissage SVG pour remplir le rectangle. Par exemple, vous pouvez choisir de ne pas remplir l'élément en mettant l'attribut de style fill à none.

<svg　xmlns="http://www.w3.org/2000/svg"　xmlns:xlink="http://www.w3.org/1999/xlink">　
<rect　x="20"　y="20"　width="100"　height="100"　
　　　　　　　　　　　　style="stroke:　#009900;fill:　none;"　/></svg>

Voici l'apparence de l'élément rect sans remplissage dans le navigateur :

Vous pouvez également choisir de remplir le rectangle avec une couleur. Cet exemple rect remplit l'élément avec une verte brillante :

<svg　xmlns="http://www.w3.org/2000/svg"　xmlns:xlink="http://www.w3.org/1999/xlink">　
<rect　x="20"　y="20"　width="100"　height="100"
　　　　　　style="stroke:　#009900;fill:　#33ff33;"/>
</svg>

Voici l'effet de remplissage de rect dans le navigateur :

Vous pouvez également utiliser l'attribut de style fill-L'opacité rend le remplissage transparent. Cet exemple montre deux rectangles, l'un partie sur le dessus de l'autre, et le rectangle supérieur est semi-transparent :

<svg　xmlns="http://www.w3.org/2000/svg"　xmlns:xlink="http://www.w3.org/1999/xlink">
<rect　x="20"　y="20"　width="100"　height="100"
　　　　　　style="stroke:　#009900;
　　　　　　　　　fill:　#33ff33;
　　　　　　　　"
　　　　　　　　/>
<rect　x="50"　y="50"　width="100"　height="100"
　　　　　　style="stroke:　#000099;
　　　　　　　　　fill:　#3333ff;
　　　　　　　　　fill-opacity:　0.5;
　　　　　　　　"
　　　　　　　　/></svg>

Voici l'aspect semi-transparent de l'élément rect en mode affichage dans le navigateur:

Dans cet exemple, le trait de la deuxième矩形 n'est pas transparent, mais vous pouvez utiliser la propriété style stroke-L'opacité le rend transparent.