SVG - Ictus
SVG supporta più proprietà di tratto.
Di seguito sono riportate le principali proprietà di tratto utilizzate.
| Sr.No. | Tipo di corsa e descrizione |
|---|---|
| 1 | stroke - definisce il colore del testo, della linea o del contorno di qualsiasi elemento. |
| 2 | stroke-width - definisce lo spessore del testo, della linea o del contorno di qualsiasi elemento. |
| 3 | stroke-linecap - definisce diversi tipi di fine di una linea o contorno di qualsiasi percorso. |
| 4 | stroke-dasharray - utilizzato per creare linee tratteggiate. |
Esempio
testSVG.htm<html>
<title>SVG Stroke</title>
<body>
<h1>Sample SVG Stroke</h1>
<svg width="800" height="800">
<g>
<text x="30" y="30" >Using stroke: </text>
<path stroke="red" d="M 50 50 L 300 50" />
<path stroke="green" d="M 50 70 L 300 70" />
<path stroke="blue" d="M 50 90 L 300 90" />
</g>
</svg>
</body>
</html>Produzione
Apri textSVG.htm nel browser web Chrome. Puoi utilizzare Chrome / Firefox / Opera per visualizzare l'immagine SVG direttamente senza alcun plug-in. Internet Explorer 9 e versioni successive supportano anche il rendering di immagini SVG.
Larghezza del tratto
<html>
<title>SVG Stroke</title>
<body>
<h1>Sample SVG Stroke</h1>
<svg width="800" height="800">
<text x="30" y="10" >Using stroke-width: </text>
<path stroke-width="2" stroke="black" d="M 50 50 L 300 50" />
<path stroke-width="4" stroke="black" d="M 50 70 L 300 70" />
<path stroke-width="6" stroke="black" d="M 50 90 L 300 90" />
</svg>
</body>
</html>Produzione
Apri textSVG.htm nel browser web Chrome. Puoi utilizzare Chrome / Firefox / Opera per visualizzare l'immagine SVG direttamente senza alcun plug-in. Internet Explorer 9 e versioni successive supportano anche il rendering di immagini SVG.
stroke-linecap
<html>
<title>SVG Stroke</title>
<body>
<h1>Sample SVG Stroke</h1>
<svg width="800" height="800">
<g>
<text x="30" y="30" >Using stroke-linecap: </text>
<path stroke-linecap="butt" stroke-width="6"
stroke="black" d="M 50 50 L 300 50" />
<path stroke-linecap="round" stroke-width="6"
stroke="black" d="M 50 70 L 300 70" />
<path stroke-linecap="square" stroke-width="6"
stroke="black" d="M 50 90 L 300 90" />
</g>
</svg>
</body>
</html>Produzione
Apri textSVG.htm nel browser web Chrome. Puoi utilizzare Chrome / Firefox / Opera per visualizzare l'immagine SVG direttamente senza alcun plug-in. Internet Explorer 9 e versioni successive supportano anche il rendering di immagini SVG.
ictus-dasharray
<html>
<title>SVG Stroke</title>
<body>
<h1>Sample SVG Stroke</h1>
<svg width="800" height="800">
<g>
<text x="30" y="30" >Using stroke-dasharray: </text>
<path stroke-dasharray="5,5" stroke-width="6"
stroke="black" d="M 50 50 L 300 50" />
<path stroke-dasharray="10,10" stroke-width="6"
stroke="black" d="M 50 70 L 300 70" />
<path stroke-dasharray="20,10,5,5,5,10" stroke-width="6"
stroke="black" d="M 50 90 L 300 90" />
</g>
</svg>
</body>
</html>Produzione
Apri textSVG.htm nel browser web Chrome. Puoi utilizzare Chrome / Firefox / Opera per visualizzare l'immagine SVG direttamente senza alcun plug-in. Internet Explorer 9 e versioni successive supportano anche il rendering di immagini SVG.