oujood.com

SVG Comment dessiner des rectangles ? <rect>

Dans ce tutorial on va apprendre par l'exemple comment dessiner des rectangles en svg

chercher |

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.

Par carabde 20 Avril 2014

La méthode secrète likes sans fin sur Facebook

Livre numérique court pour comprendre la méthode secrète permettant d'obtenir des likes sans fin sur Facebook.

GAGNER DE L'ARGENT
GRÂCE À FACEBOOK 
N'A JAMAIS ÉTÉ SI FACILE


Consulter


1tpe
Votre soutien nous aide à faire fonctionner le site
Cette page vous a été utile? Partagez la pour nous encourager à continuer. Merci




Hébergeur Discount - Hébergement web