rectangle SVG
Formes SVG
SVG comporte des éléments de forme prédéfinis qui peuvent être utilisés et manipulés par les développeurs :
Rectangle < rect>
cercle<cercle>
ellipse<ellipse>
line<line>
polyligne<polyligne>
polygone<polygone>
Chemin<chemin>
Les chapitres suivants vous expliqueront ces éléments, en commençant par l'élément rectangulaire.
SVG Rectangle - <rect>
Exemple 1
<rect> peut être utilisée pour créer des rectangles, ainsi que des variantes de rectangle :
Ce qui suit est le code SVG :
Instance
<!DOCTYPE html> <html> <body> <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <rect width="300" height="100" style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)" /> </svg> </body> </html>
Exécuter l'instance»
Cliquez sur "Exécuter Instance" pour visualiser l'instance en ligne
Pour les utilisateurs d'Opera : Visualisez le fichier SVG (clic droit sur la source d'aperçu graphique SVG).
Analyse du code :
Les attributs width et height de l'élément rect peuvent définir la hauteur et la largeur du rectangle
-
L'attribut style est utilisé pour définir les propriétés CSS
L'attribut fill du CSS définit la couleur de remplissage du rectangle (valeur RVB, nom de la couleur ou valeur hexadécimale)
La propriété Stroke-width du CSS définit la largeur de la bordure rectangulaire
La propriété Stroke du CSS définit la couleur de la bordure rectangulaire
Exemple 2
Regardons un autre exemple qui contient de nouveaux attributs :
Voici le code SVG :
Exemple
<!DOCTYPE html> <html> <body> <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;fill-opacity:0.1;stroke-opacity:0.9" /> </svg> </body> </html>
Exécuter l'instance»
Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne
Pour les utilisateurs d'Opera : affichez le fichier SVG (clic droit sur le graphique SVG pour prévisualiser la source).
Analyse du code :
L'attribut x définit la position gauche du rectangle (par exemple, x="0" définit le rectangle au à gauche de la fenêtre du navigateur La distance depuis le côté est de 0px)
L'attribut y définit la position supérieure du rectangle (par exemple, y="0" définit la distance depuis le rectangle en haut de la fenêtre du navigateur soit 0px)
L'attribut fill-opacity de CSS définit la transparence de la couleur de remplissage (la plage légale est : 0 - 1)
L'attribut Stroke-opacity de CSS définit la transparence de la couleur du trait (la plage légale est : 0 - 1)
Exemple 3
Définissez l'opacité de l'élément entier :
Voici le code SVG :
Instance
<!DOCTYPE html> <html> <body> <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.5" /> </svg> </body> </html>
Exécuter l'instance»
Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne
Pour les utilisateurs d'Opera : affichez le fichier SVG (clic droit sur la source d'aperçu graphique SVG).
La propriété CSS opacity définit la valeur de transparence d'un élément (plage : 0 à 1).
Exemple 4
Dernier exemple, créez un rectangle arrondi :
Voici le code SVG :
Instance
<!DOCTYPE html> <html> <body> <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:red;stroke:black;stroke-width:5;opacity:0.5" /> </svg> </body> </html>
Exécuter l'instance»
Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne
Pour Utilisateurs d'Opera : Visualisez les fichiers SVG (clic droit sur la source d'aperçu graphique SVG).
Les attributs rx et ry peuvent donner au rectangle des coins arrondis.
