Proprietà stroke SVG

L'attributo stroke definisce il colore del contorno di un elemento grafico specifico. Il suo valore predefinito è none.

　Proprietà comuni includono:

1. stroke-width

2. stroke-linecap

3. stroke-linejoin

4. stroke-miterlimit

5. stroke-dasharray + stroke-dashoffset

6. stroke-opacity

Proprietà di stile

La proprietà style di CSS, stroke e fill, specificano le proprietà interne delle forme SVG. Ecco un esempio:

<svg　xmlns="http://www.w3.org/2000/svg"　xmlns:xlink="http://www.w3.org/1999/xlink">　
<circle　cx="50"　cy="50"　r="50"　style="stroke:　#000066;　fill:　3333ff;"　/>
</svg>

Questo esempio definisce un cerchio con un colore di tratto blu scuro (#000066) e un colore di riempimento blu chiaro (3333ff).

Esempio di tratto

Il tratto delle forme SVG è il contorno della forma. Ecco un esempio di tratto SVG:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><circle cx="50" cy="50" r="25"
　　　　　　style="stroke:　#000000;　fill:none;"　/></svg>

Questo esempio definisce un cerchio senza riempimento e con un colore di tratto nero (#000000). Esempio di effetto immagine dopo l'esecuzione:

Esempio di tratto e riempimento (Stroke & Fill)

Puoi combinare i colori di tratto e riempimento di SVG per creare forme SVG. Ecco un esempio di tratto e riempimento di SVG:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><circle cx="50" cy="50" r="25"
　　　　　　　　style="stroke: #000066; fill: #3333ff;"　/></svg>

In questo esempio, è definito un cerchio con un colore di tratto più scuro (#000066) e un colore di riempimento più chiaro (#3333ff). L'effetto dell'immagine dopo l'esecuzione è:

stroke-width

SVG ha l'attributo CSS stroke-width che definisce la larghezza del tratto. Ecco un esempio di stroke-width di SVG:

stroke-width: 3px;

In questo esempio, la larghezza del tratto è impostata a 3 pixel. Puoi usare unità diverse dai pixel. InVedere tutte le unità disponibili nel sistema di coordinate SVG。

Questi sono quattro esempi diversi di stroke-width:

<svg width="500" height="120">
<circle cx="50" cy="50" r="25"
　　　　　　　　style="stroke: #000066; fill: none; stroke-width: 1px;"　/>
<circle cx="150" cy="50" r="25"
　　　　　　　　style="stroke: #000066; fill: none; stroke-width: 3px;"　/>
<circle cx="250" cy="50" r="25"
　　　　　　　　style="stroke: #000066; fill: none; stroke-width: 6px;"　/>
<circle cx="350" cy="50" r="25"
　　　　　　　　style="stroke: #000066; fill: none; stroke-width: 12px;"　/>
</svg>

Effetto dell'immagine dopo l'esecuzione:

cappuccio di tratto (stroke-linecap)

L'attributo CSS stroke-linecap di SVG definisce come viene presentata la fine della linea di SVG. L'attributo stroke-linecap di CSS ha tre valori possibili. Questi sono:

butt
square
round

Questo valore crea un cappuccio di filo, che taglierà esattamente alla fine della linea. Questo valore farà sembrare il cappuccio di filo come butt (troncato), ma leggermente oltre la fine della riga. Questo valore farà sembrare il cappuccio di filo come rotondo.

Qui ci sono tre SVG stroke-linecap che mostrano questi tre valori di esempio di stroke-linecap (ordine = butt, square, round):

Questo esempio definisce tre linee verdi, ciascuna con uno stroke-width di 10, per illustrare meglio l'effetto dell'attributo CSS stroke-linecap. Ogni linea verde disegna una linea nera con uno stroke-width di 1, che ha gli stessi coordinate x1, y1 e x2, y2 della linea verde, ma senza uno stroke-linecap. In questo modo, è possibile vedere le differenze tra i valori di stroke-linecap.

Connessione di tratti di penna (stroke-linejoin)

L'attributo CSS stroke-linejoin definisce come viene visualizzata la connessione tra due linee di una forma. L'attributo CSS stroke-linejoin può accettare uno dei tre valori. Questi valori sono:

miter
round
bevel

Questi sono tre esempi di SVG stroke-linejoin che illustrano questi valori diversi:

<svg width="500" height="120">
<path d="M20,100 l20,-50 l20,50"
　　　　　　style="stroke: #000000; fill:none; stroke-width:16px; stroke-linejoin: miter;" ></path>
<text x="22" y="20">miter</text>
<path d="M120,100 l20,-50 l20,50"
　　　　　　style="stroke: #000000; fill:none; stroke-width:16px; stroke-linejoin: round;" ></path>
<text x="122" y="20">round</text>
<path d="M220,100 l20,-50 l20,50"
　　　　　　style="stroke: #000000; fill:none; stroke-width:16px; stroke-linejoin: bevel;" ></path>
<text x="222" y="20">bevel</text>
</svg>

stroke-miterlimit

Lo stile di disegno dell'attributo stroke-miterlimit viene utilizzato insieme a stroke-linejoin. Se stroke-linejoin è impostato su incrocio, stroke-miterlimit può essere utilizzato per limitare la distanza tra i punti di intersezione delle due linee (estensione degli angoli di linea).

Questo è un esempio di SVG stroke-miterlimit:

<svg width="500" height="120">
<path d="M20,100 l20,-50 l20,50"
　　　　　　style="stroke: #000000; fill:none;
　　　　　　　　　　　　　stroke-width:16px;
　　　　　　　　　　　　　stroke-linejoin: miter; stroke-miterlimit: 1.0;
　　　　　　　　　　　　　"　></path>
<text x="29" y="20">1.0</text>
<path d="M120,100 l20,-50 l20,50"
　　　　　　style="stroke: #000000; fill:none;
　　　　　　　　　　　　　stroke-width:16px;
　　　　　　　　　　　　　stroke-linejoin: miter; stroke-miterlimit: 2.0;
　　　　　　　　　　　　　"　></path>
<text x="129" y="20">2.0</text>
<path d="M220,100 l20,-50 l20,50"
　　　　　　style="stroke: #000000; fill:none;
　　　　　　　　　　　　　stroke-width:16px;
　　　　　　　　　　　　　stroke-linejoin: miter; stroke-miterlimit: 4.0;
　　　　　　　　　　　　　"　></path>
<text x="229" y="20">4.0</text>
</svg>

Nota stroke-miterlimit, come tre percorsi utilizzano tre valori diversi, altrimenti sembrano quasi identici. Effetto dell'immagine dopo l'esecuzione:

La lunghezza della connessione delle linee viene chiamata lunghezza del trattino. La lunghezza del trattino è misurata dal angolo interno della connessione alla punta della connessione. In questa immagine, la lunghezza del trattino è disegnata in rosso sulla cima della connessione e ripetuta sulla destra della connessione:

Immagina che maggiore è la larghezza del percorso, maggiore è l'angolo tra le linee di connessione e più a lungo è il tempo del trattino.

In realtà, stroke-miterlimit imposta il limite superiore del rapporto tra la lunghezza del trattino e la larghezza del tratto. Pertanto, un stroke-miterlimit di 1.0 significa che la lunghezza del trattino massima è 1 x la larghezza del tratto. I trattini che superano questo intervallo. 1.0 è il valore minimo possibile per stroke-miterlimit.

Ecco alcuni esempi di utilizzo di 1.0 come valore di stroke-miterlimit, ma gli angoli delle linee di connessione sono diversi:

Nota che quando gli angoli sono grandi, la parte tagliata dell'angolo è più grande. Questo perché gli angoli acuti naturalmente producono trattini più lunghi.

stroke-dasharray + stroke-dashoffset

L'attributo CSS di SVG stroke-dasharray viene utilizzato per disegnare i contorni delle forme SVG con tratti a tratteggio. Viene chiamato “array di trattini” perché fornisci un array numerico come valore. Questi valori definiscono la lunghezza dei trattini e degli spazi. Pertanto, dovresti fornire un numero pari di numeri.

Questo è un esempio di SVG stroke-dasharray:

<svg width="500" height="120">
<line x1="20" y1="20" x2="120" y2="20"
　　　　　　style="stroke: #000000; fill:none;
　　　　　　stroke-width: 6px; stroke-dasharray: 10 5</line>
</svg>

Questo esempio definisce una linea tratteggiata con larghezza tratteggiata di 10 pixel e intervallo di 5 pixel. Effetto dell'immagine dopo l'esecuzione:

Ecco alcuni esempi con diverse larghezze di trattini e spazi:

<svg width="500" height="120">
<line x1="20" y1="20" x2="120" y2="20"
　　　　　　style="stroke: #000000; fill:none;
　　　　　　stroke-width: 6px;
　　　　　　stroke-dasharray: 10 5 5 5</line>
<line x1="20" y1="40" x2="120" y2="40"
　　　　　　style="stroke: #000000; fill:none;
　　　　　　stroke-width: 6px;
　　　　　　stroke-dasharray: 10 5 5 10</line>
</svg>

La prima riga inizia con una larghezza tratteggiata di 10 pixel, seguita da un intervallo di 5 pixel, quindi 5 pixel di tratteggiati, poi un altro intervallo di 5 pixel. Poi ripete il modello.

La seconda riga inizia con una larghezza tratteggiata di 10 pixel, seguita da un intervallo di 5 pixel, quindi 5 pixel di tratteggiati, infine 10 pixel di intervallo.

Effetto dell'immagine dopo l'esecuzione:

stroke-dashoffset viene utilizzato per impostare la distanza da cui inizia il modello tratteggiato. In questo modo, è possibile iniziare a tracciare dal mezzo di un disegno, ad esempio da metà di un disegno di schema, e ripetere il modello da lì. Ecco un esempio di SVG stroke-dashoffset:

<svg width="500" height="120">
<line x1="20" y1="20" x2="170" y2="20"
　　　　　　style="stroke: #000000; fill:none;
　　　　　　stroke-width: 6px;
　　　　　　stroke-dasharray: 10 5; stroke-dashoffset: 5;
　　　　　　"</svg>
</svg>

In questo esempio, dash-offset è impostato a 5 pixel, il che significa che la visualizzazione della linea tratteggiata inizia a 5 pixel dall'inizio del tratto tratteggiato (non tutti i browser supportano completamente questa funzione). Effetto dell'immagine dopo l'esecuzione:

stroke-opacity

L'attributo CSS stroke-opacity di SVG viene utilizzato per definire l'opacità del contorno delle forme SVG. Più il valore di stroke-opacity è vicino a 0, più la linea è trasparente. Più il valore è vicino a 1, più la linea è opaca. Il valore predefinito di stroke-opacity è 1, che significa che la linea è completamente opaca.

Questo è un esempio di SVG stroke-opacity, che mostra tre righe di testo con diversa stroke-opacity in alto:

<svg width="500" height="120">
　　　　<text　x="22"　y="40">Testo　dietro　la　forma</text>
　　　　<path　d="M20,40　l50,0"
　　　　　　　　　　style="stroke:　#00ff00;　　　　fill:none;
　　　　　　　　　　　　　　　　　stroke-width:16px;
　　　　　　　　　　　　　　　　　stroke-opacity:　0.3;
　　　　　　　　　　　　　　　　　"　></path>
　　　　<path　d="M80,40　l50,0"
　　　　　　　　　　style="stroke:　#00ff00;　　　　fill:none;
　　　　　　　　　　　　　　　　　stroke-width:16px;
　　　　　　　　　　　　　　　　　stroke-opacity:　0.7;
　　　　　　　　　　　　　　　　　"　></path>
　　　　<path　d="M140,40　l50,0"
　　　　　　　　　　style="stroke:　#00ff00;　　　　fill:none;
　　　　　　　　　　　　　　　　　stroke-width:16px;
　　　　　　　　　　　　　　　　　stroke-opacity:　1;
　　　　　　　　　　　　　　　　　"　></path>
</svg>

Questo è l'immagine generata. Nota che il testo posteriore diventa sempre meno visibile.