Un seul outil dont vous avez besoin pour lancer votre business en ligne.
Et c'est gratuit.

SVG Comment dessiner des rectangles ? <rect>

Somaire

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 :

Sélectionner le code


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

Sélectionner 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 :

Sélectionner 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 :

Sélectionner 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