Rectangle de SVG

Pour comprendre comment ceci fonctionne, copier le code suivant dans le bloc-notes et sauver le dossier en tant que « rect.svg ». Placer le dossier suivant dans votre annuaire de Web :

Exemple d'employer l'étiquette de <rect>

<?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 width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<rect width="400" height="200"
style="fill:rgb(0,0,255);stroke-width:1;
stroke:rgb(0,0,0)"/>
</svg>

Explication du code :

Les attributs de largeur et de taille de l'élément de rect définissent la largeur et la taille du rectangle
L'attribut de modèle définit des propriétés de CSS
La propriété de suffisance de CSS définissent la couleur de suffisance du rectangle (une valeur de RVB, un nom de couleur, ou une valeur hexadécimale)
La propriété de course-largeur de CSS définissent la largeur de la frontière du rectangle
La propriété de course de CSS définissent la couleur de la frontière du rectangle

Regardons un autre exemple qui contient quelques nouveaux attributs :

<?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 width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<rect x="20" y="20" width="350" height="350"
style="fill:blue;stroke:pink;stroke-width:5;
fill-opacity:0.1;stroke-opacity:0.9"/>
</svg>

Explication du code :

L'attribut de x définit la position gauche du rectangle (par exemple le x= " 0 " place les Pixel du rectangle 0 de la gauche du navigateur)
L'attribut de y définit la position supérieure du rectangle (par exemple le y= " 0 " place les Pixel du rectangle 0 à partir du dessus du navigateur)
La propriété de remplir-opacité de CSS définit l'opacité de couleur de suffisance (gamme légale : 0 à 1)
La propriété de course-opacité de CSS définit l'opacité de couleur de course (gamme légale : 0 à 1)

Le code suivant définissent l'opacité pour l'élément entier :

<?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 width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<rect x="20" y="20" width="350" height="350"
style="fill:blue;stroke:pink;stroke-width:5;
opacity:0.9"/>
</svg>

Explication du code :

La propriété d'opacité de CSS définit la valeur d'opacité pour le tout élément (gamme légale : 0 à 1)

Le dernier exemple créera un rectangle avec les coins arrondis :

<?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 width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<rect x="20" y="20" rx="20" ry="20" width="350"
height="100" style="fill:blue;stroke:black;
stroke-width:5;opacity:0.5"/>
</svg>

Explication de code :

Le rx et les attributs de relais arrondit les coins du rectangle