OUJOOD.COM
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 :
Exemple : 📋 Copier le code
<!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
Exemple : 📋 Copier le code
<!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 :
Exemple : 📋 Copier le code
<!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 :
Exemple : 📋 Copier le code
<!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>Par carabde 20 Avril 2014