Proprietà Stroke SVG
SVG offre una vasta gamma di proprietà del tratto. In questo capitolo vedremo il seguente:
- ictus
- stroke-width
- Corsa-Linecap
- Corsa-dasharray
Tutte le proprietà del tratto possono essere applicate a qualsiasi tipo di linee, testo e contorni di elementi come un cerchio.
SVG ictus Proprietà
La proprietà di tratto definisce il colore di una linea, testo o supporto di un elemento:
Ecco il codice SVG:
Esempio
<svg height="80" width="300">
<g fill="none">
<path stroke="red" d="M5 20 l215 0" />
<path stroke="black" d="M5 40 l215 0" />
<path stroke="blue" d="M5 60 l215 0" />
</g>
</svg>
Prova tu stesso " stroke-width SVG Proprietà
La struttura stroke-width definisce lo spessore di una linea, testo o supporto di un elemento:
Ecco il codice SVG:
Esempio
<svg height="80" width="300">
<g fill="none" stroke="black">
<path stroke-width="2" d="M5 20 l215 0" />
<path stroke-width="4" d="M5 40 l215 0" />
<path stroke-width="6" d="M5 60 l215 0" />
</g>
</svg>
Prova tu stesso " SVG ictus-Linecap Proprietà
La proprietà ictus-Linecap definisce diversi tipi di terminazioni di un tracciato aperto:
Ecco il codice SVG:
Esempio
<svg height="80" width="300">
<g fill="none" stroke="black" stroke-width="6">
<path stroke-linecap="butt" d="M5 20 l215 0" />
<path stroke-linecap="round" d="M5 40 l215 0" />
<path stroke-linecap="square" d="M5 60 l215 0" />
</g>
</svg>
Prova tu stesso " SVG ictus-dasharray Proprietà
La proprietà ictus-dasharray viene utilizzato per creare linee tratteggiate:
Ecco il codice SVG:
Esempio
<svg height="80" width="300">
<g fill="none" stroke="black" stroke-width="4">
<path stroke-dasharray="5,5" d="M5 20 l215 0" />
<path stroke-dasharray="10,10" d="M5 40 l215 0" />
<path stroke-dasharray="20,10,5,5,5,10" d="M5 60 l215 0" />
</g>
</svg>
Prova tu stesso "