HTML5 cours tutorial SVG
SVG tracer une ligne avec la balise - <line>
L'élément <line> est utilisé pour créer une ligne :
Voici le code SVG :
<!DOCTYPE html>
<html>
<head>
<title> Dessiner un rectangle avec SVG</title>
</head>
<body>
<div>
<svg viewBox="0 0 1200 400" xmlns="http://www.w3.org/2000/svg"
version="1.1">
<line x1="0" y1="0" x2="450" y2="70"
style="stroke:rgb(255,0,0);stroke-width:2"/>
</svg>
</div>
</body>
</html>
Explication du code :
L’attribut x1 définit le début de la ligne sur l'axe des abscisses(axe
des x)
L'attribut y1 définit le début de la ligne sur l'axe (axe des y)
L’attribut x2 définit la fin de la ligne sur l'axe des abscisses
L'attribut y2 définit la fin de la ligne sur l'axe des ordonnées
Exemple 2
<!DOCTYPE html>
<html>
<head>
<title> Dessiner un rectangle avec SVG</title>
</head>
<body>
<div>
<svg viewBox="0 0 1200 400" xmlns="http://www.w3.org/2000/svg"
version="1.1">
<g stroke="red" >
<line x1="100" y1="300" x2="200" y2="100"
stroke-width="1" />
<line x1="300" y1="300" x2="300" y2="100"
stroke-width="5" />
<line x1="500" y1="300" x2="400" y2="100"
stroke-width="9" />
<line x1="700" y1="300" x2="500" y2="100"
stroke-width="13" />
<line x1="900" y1="300" x2="600" y2="100"
stroke-width="17" />
</g>
</svg>
</div>
</body>
</html>
SVG polyligne - <polyline>
L'élément <polyline> est utilisé pour créer toutes les formes qui
se compose uniquement de lignes droites :
Voici le code SVG :
<!DOCTYPE html>
<html>
<head>
<title> Dessiner un rectangle avec SVG</title>
</head>
<body>
<div>
<svg viewBox="0 0 1200 400" xmlns="http://www.w3.org/2000/svg"
version="1.1">
<polyline points="20,20 40,25 60,40 80,120 120,140 200,180"
style="fill:none;stroke:black;stroke-width:3" />
</svg>
</div>
</body>
</html>
Explication du code
La liste des nombre est constituée de plusieurs paires séparées par un
espace, les deux nombres constituant la paire sont séparées par une
virgule.
Dans l’exemple :la paire 20,20 sont les coordonnés du début du premier
segment et 40,25 est sa fin et est en même temps le début du second
segment ainsi de suite jusqu’à la paire finale qui sera la fin du
dernier segment.
Exemple 2
Un autre exemple avec uniquement des lignes droites :
Voici le code SVG :
<!DOCTYPE html>
<html>
<head>
<title> Dessiner un rectangle avec SVG</title>
</head>
<body>
<div>
<svg viewBox="0 0 1200 400" xmlns="http://www.w3.org/2000/svg"
version="1.1">
<polyline points="0,40 40,0 80,40 120,0 160,40 200,0 240,40
0,40"
style="fill:white;stroke:red;stroke-width:4"/>
</svg>
</div>
</body>
</html>
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'ARGENTGRÂCE À FACEBOOK
N'A JAMAIS ÉTÉ SI FACILE
Consulter
Votre soutien nous aide à faire fonctionner le site
Cette page vous a été utile? Partagez la pour nous encourager à continuer. MerciHébergeur Discount - Hébergement web