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