SVG
polilinea
Ricerca…
Sintassi
<polyline points="10,5 25,15 20,10" />
Parametri
Parametro | Dettagli |
---|---|
punti | L'attributo punti definisce un elenco di punti. Ogni punto è definito dall'asse e da una coordinata nel sistema di coordinate dell'utente. |
stroke-width | Larghezza del tratto |
ictus-opacità | Opacità di ictus |
ictus dasharray | (Opzionale) Specifica il motivo del trattino per il tratto |
ictus linecap | (Facoltativo) Specifica se la fine della linea deve essere a filo, rotonda o quadrata ("testa" (predefinito) / "rotondo" / "quadrato") |
ictus linejoin | (Opzionale) Specifica il modo in cui i segmenti di linea devono essere uniti: smussati, arrotondati o smussati ("mitra" (predefinito) / "rotondo" / "smusso") |
ictus miterLimit | (Opzionale) Specifica la dimensione massima di una mitra. I join con giunture che superano questo limite vengono convertiti in un join smussato. Default = "4" |
SVG che include una polilinea
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<polyline points="10,5 25,15 20,10" />
</svg>
Polilinee con linee alternative, lancette e mitigini
<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>
Risultato
Modified text is an extract of the original Stack Overflow Documentation
Autorizzato sotto CC BY-SA 3.0
Non affiliato con Stack Overflow