SVG <Rect>

SVG Formes

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

• Rectangle <rect>
• Cercle <circle>
• Ellipse <ellipse>
• Ligne <line>
• Polyline <polyline>
• Polygon <polygon>
• Chemin <path>

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

SVG Rectangle - <rect>

Exemple 1

Le <rect> élément est utilisé pour créer un rectangle et les variations d'une forme rectangulaire:

Voici le code SVG:

Code explanation:

• La largeur et la hauteur des attributs de l' <rect> élément définissent la hauteur et la largeur du rectangle ,
• Le style de l' attribut est utilisé pour définir les propriétés CSS pour le rectangle
• La propriété CSS de remplissage 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é de la course de CSS définit la couleur de la bordure du rectangle

exemple 2

Regardons un autre exemple qui contient quelques nouveaux attributs:

Voici le code SVG:

Code explanation:

• Le x attribut définit la position gauche du rectangle (par exemple x = "50" place le rectangle 50 px de la marge gauche)
• L' y attribut définit la position supérieure du rectangle (par exemple y = "20" place le rectangle 20 px de la marge supérieure)
• La propriété CSS remplissage opacité définit l'opacité de la couleur de remplissage (legal range: 0 to 1)
• La propriété CSS stroke-opacity définit l'opacité de la couleur de course (legal range: 0 to 1)

exemple 3

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

Voici le code SVG:

Code explanation:

• La propriété CSS d'opacité définit la valeur d'opacité pour l'élément entier (legal range: 0 to 1)

exemple 4

Dernier exemple, créer un rectangle avec des coins arrondis:

Voici le code SVG:

Code explanation:

• Le rx et les ry attributs arrondit les coins du rectangle