Définit la marge bas d'un élément
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
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)
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)
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 2014SCREEBER - Logiciel de copywriting Augmentez vos résultats en rejoignant les 1600 entrepreneurs qui utilisent Screeber®, le seul logiciel de Copywriting (en français) qui rédige avec vous des textes de vente qui convertissent