SVG DEssin de Rectangle - l'élément <rect>

chapitre précédent

sommaire

chapitre suivant

SVG DEssin de Rectangle - l'élément <rect>

HTML5 cours tutorial SVG

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

Voici le code SVG :


  <!DOCTYPE html>
 <html>
 <head>
 <title> dessiner un rectangle avec SVG</title>
 </head>
 <body>
 <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
   <rect width="170" height="100"
  style="fill:#00f;stroke-width:1;stroke:#000" />
 </svg>
 </body>
 </html>

Explication du code :
Les attributs width et height de l'élément rect définissent la hauteur et la largeur du rectangle
L'attribut style permet de définir des propriétés CSS
La propriété fill définit la couleur de remplissage du rectangle
La propriété stroke-width définit la largeur de la bordure du rectangle
La propriété stroke définit la couleur de la bordure du rectangle

Exemple 2 Prenons un autre exemple qui contient quelques nouveaux attributs :

Voici le code SVG :

Exemple : Copier le code


  <?xml version="1.0" standalone="no"?>
 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
 <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
   <rect x="50" y="100" width="200px" height="200px"
  style="fill:blue;stroke:red;stroke-width:2;fill-opacity:0.1;stroke-opacity:0.9"
  />
 </svg>

Explication du code :
L'attribut x définit la position gauche du rectangle (par exemple x = « 50 » place le rectangle 50 px de la marge de gauche), si l'attribut n'est pas spécifié, il prend la valeur zéro « 0 ».
L'attribut y définit la position supérieure du rectangle (par ex. y = « 100 » places le rectangle 100 px de la marge supérieure) , là aussi si l'attribut n'est pas spécifié, il prend la valeur zéro « 0 ».
La propriété fill-opacity définit l'opacité de la couleur de remplissage (gamme légale: 0 à 1)
La propriété stroke-opacity définit l'opacité de la couleur du contour (gamme légale: 0 à 1)

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

Voici le code SVG :

Exemple : Copier le code


  <?xml version="1.0" standalone="no"?>
 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
 <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
 <rect x="50" y="20" width="150" height="150" 
  style="fill:blue;stroke:pink;stroke-width:5;opacity:0.4"/>
 </svg>

Explication de code :
La propriété CSS opacity définit la valeur d'opacité de l'élément entier (gamme légale: 0 à 1)

Exemple 4 Créer un rectangle aux coins arrondis :

Voici le code SVG :

Exemple : Copier le code


  <?xml version="1.0" standalone="no"?>
 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
 <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
 <rect x="50" y="20" rx="20" ry="20" width="150"
  height="150"
  style="fill:green;stroke:red;stroke-width:5;opacity:0.5"/>
 </svg>

Explication de code :
Les attributs rx et ry arrondissent les angles du rectangle en définissant les rayons des arrondits.

chapitre précédent

sommaire

chapitre suivant

Par carabde 20 Avril 2014

SVG Comment dessiner des rectangles ? <rect>

La base du SVG