Proprietà Stroke SVG
Proprietà Stroke SVG
SVG offre una vasta gamma di attributi del tratto. In questo capitolo, vedremo quanto segue:
- corsa
- stroke-width
- Corsa-Linecap
- Corsa-dasharray
Tutti gli attributi ictus possono essere applicate a qualsiasi tipo di linee, testo e elementi come un contorno circolare.
proprietà di tratto SVG
attributo Stroke definisce una linea, o il colore del testo elemento contorno:
Ecco il codice SVG:
Esempi
<G di riempimento = "none">
<Percorso ictus = "red" d = "M5 20 L215 0" />
<Percorso ictus = "blu" d = "M5 40 L215 0" />
<Percorso ictus = "nero" d = "M5 60 L215 0" />
</ G>
</ Svg>
Prova »
Per gli utenti di Opera: file in formato SVG vista (tasto destro del mouse sulla grafica anteprima Source SVG).
stroke-width attributo SVG
Tstroke- attributi width definiscono una linea, o lo spessore del testo elemento di contorno:
Ecco il codice SVG:
Esempi
<G fill = corsa "none" = "black">
<Percorso stroke-width = "2" d = "M5 20 L215 0" />
<Percorso stroke-width = "4" d = "M5 40 L215 0" />
<Percorso stroke-width = "6" d = "M5 60 L215 0" />
</ G>
</ Svg>
Prova »
Per gli utenti di Opera: file in formato SVG vista (tasto destro del mouse sulla grafica anteprima Source SVG).
SVG proprietà ictus-Linecap
attributo strokelinecap definisce la fine di un percorso aperto di diversi tipi:
Ecco il codice SVG:
Esempi
<G fill = "none" stroke = "nero" stroke-width = "6">
<Percorso ictus-Linecap = "testa a testa" d = "M5 20 L215 0" />
<Percorso ictus-Linecap = "round" d = "M5 40 L215 0" />
<Percorso ictus-Linecap = D "piazza" = "M5 60 L215 0" />
</ G>
</ Svg>
Prova »
Per gli utenti di Opera: file in formato SVG vista (tasto destro del mouse sulla grafica anteprima Source SVG).
SVG proprietà ictus-dasharray
strokedasharray immobili utilizzati per creare la linea tratteggiata:
Ecco il codice SVG:
Esempi
<G fill = "none" stroke = "nero" stroke-width = "4">
<Percorso ictus-dasharray = "5,5" d = "M5 20 L215 0" />
<Percorso ictus-dasharray = "10,10" d = "M5 40 L215 0" />
<Percorso ictus-dasharray = "20,10,5,5,5,10" d = "M5 60 L215 0" />
</ G>
</ Svg>
Prova »
Per gli utenti di Opera: file in formato SVG vista (tasto destro del mouse sulla grafica anteprima Source SVG).