SVG
Polyligne
Recherche…
Syntaxe
<polyline points="10,5 25,15 20,10" />
Paramètres
| Paramètre | Détails |
|---|---|
| points | L'attribut de points définit une liste de points. Chaque point est défini par une coordonnée ax et ay dans le système de coordonnées utilisateur. |
| largeur du trait | Largeur de coup |
| opacité du trait | Opacité du coup |
| accident vasculaire cérébral | (Facultatif) Spécifie le motif de tiret du trait |
| trait de ligne | (Facultatif) Spécifie si la fin de ligne doit être alignée, ronde ou carrée ("butt" (par défaut) / "round" / "square") |
| coup de ligne | (Facultatif) Spécifie la manière dont les segments de ligne doivent être joints: onglet, arrondi ou biseauté ("mitre" (par défaut) / "round" / "bevel") |
| stroke-miterlimit | (Facultatif) Spécifie la dimension maximale d'un onglet. Les jointures par onglet qui dépassent cette limite sont converties en jointure en biseau. Par défaut = "4" |
SVG incluant une polyligne
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<polyline points="10,5 25,15 20,10" />
</svg>
Polylignes avec alignements alternatifs, linecaps et miterlimits
<svg width="600px" height="600px" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<polyline points="10,10,50,40,80,30,120,90,130,10,180,50,250,100,300,10" fill="none" stroke="red" stroke-width="10" />
<text x="320" y="20">Default drawing stroke</text>
<g transform="translate(0,150)">
<polyline points="10,10,50,40,80,30,120,90,130,10,180,50,250,100,300,10" fill="none" stroke="red" stroke-width="10" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="2"/>
<text x="320" y="20">stroke-linecap="butt" (default)</text>
<text x="320" y="40">stroke-linejoin="miter"(default)</text>
<text x="320" y="60">stroke-miterlimit="2"</text>
</g>
<g transform="translate(0,300)">
<polyline points="10,10,50,40,80,30,120,90,130,10,180,50,250,100,300,10" fill="none" stroke="red" stroke-width="10" stroke-linecap="round" stroke-linejoin="round" />
<text x="320" y="20">stroke-linecap="round" </text>
<text x="320" y="40">stroke-linejoin="round" </text>
</g>
<g transform="translate(0,450)">
<polyline points="10,10,50,40,80,30,120,90,130,10,180,50,250,100,300,10" fill="none" stroke="red" stroke-width="10" stroke-linecap="square" stroke-linejoin="bevel"/>
<text x="320" y="20">stroke-linecap="square"</text>
<text x="320" y="40">stroke-linejoin="bevel"</text>
</g>
</svg>
Résultat
Modified text is an extract of the original Stack Overflow Documentation
Sous licence CC BY-SA 3.0
Non affilié à Stack Overflow