Proprietà del tratto SVG
Proprietà del tratto SVG
SVG offre un'ampia gamma di proprietà del tratto. In questo capitolo vedremo quanto segue:
- colpo
- larghezza del tratto
- ictus-linecap
- ictus-dasharray
Tutte le proprietà del tratto possono essere applicate a qualsiasi tipo di linea, testo e contorni di elementi come un cerchio.
Proprietà tratto SVG
La proprietà del tratto definisce il colore di una linea, del testo o del contorno 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>
Proprietà della larghezza del tratto SVG
La proprietà tratto-larghezza definisce lo spessore di una linea, testo o contorno 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>
Proprietà SVG stroke-linecap
La proprietà stroke-linecap definisce diversi tipi di desinenze 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>
Proprietà SVG stroke-dasharray
La proprietà stroke-dasharray viene utilizzata 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>