Proprietà fill SVG

La definizione di fill delle forme SVG definisce il colore della forma all'interno del contorno. In altre parole, la superficie della forma SVG. Il riempimento è una delle proprietà CSS di base che puoi impostare per qualsiasi forma SVG.

Esempio di riempimento

Il riempimento delle forme SVG è il riempimento all'interno del contorno della forma. Ecco un esempio di riempimento SVG:

<svg width="500" height="100"><circle cx="50" cy="50" r="25"
　　　　　　　　style="stroke: none; fill: #0000ff;" </svg>

Questo esempio definisce un cerchio con colore di riempimento blu (#0000ff) ma senza colore di contorno. Ecco l'immagine generata:

Esempio di riempimento e tratto

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

<svg width="500" height="100"><circle cx="50" cy="50" r="25"
　　　　　　　　style="stroke: #000066; fill: #3333ff;" </svg>

Questo esempio utilizza un colore di contorno blu più scuro (#000066) e un colore di riempimento blu più chiaro (#3333ff) per definire il cerchio. Ecco l'immagine generata:

fill-opacity

L'attributo CSS fill-opacity di SVG viene utilizzato per impostare l'opacità del colore di riempimento della forma. L'opacità fill-opacity utilizza valori tra 0 e 1. Più il valore è vicino a 0, più il riempimento è trasparente. Più il valore è vicino a 1, più il riempimento è opaco. Il valore predefinito di fill-opacity è 1, il che significa che il colore di riempimento è completamente opaco.

Questo è un esempio di SVG di opacità di riempimento fill-opacity, che contiene due cerchi con diversa (fill-opacity):

<svg width="500" height="120">
<text x="22" y="40">Testo dietro alla forma</text>
<circle cx="50" cy="50" r="25"
　　　　　　　　style="stroke: none; fill: #0000ff;
　　　　　　　　　　　　　　　fill-opacity: 0.3; </path>
<circle cx="120" cy="50" r="25">
　　　　　　　　style="stroke: none; fill: #0000ff;
　　　　　　　　　　　　　　　fill-opacity: 0.7;
</svg>

Questo è l'immagine generata.

Notate che il testo dietro il cerchio destro è meno visibile rispetto a quello dietro il cerchio sinistro. Questo è perché l'opacità del riempimento del cerchio destro è maggiore rispetto a quella del cerchio sinistro.

fill-rule

fill-rule determina il modo di riempimento di forme complesse. fill-rule può avere due valori diversi . Questi valori sono:

• nonzero

• evenodd

Di solito, questi due valori determinano le regole per determinare la forma interna ed esterna di un oggetto. Solo il riempimento interno, per un cerchio è semplice, ma per forme più complesse non è così facile. Guardate questo esempio di <path>:

<svg width="500" height="120">
<path d="M50,20 l40,40 l-40,40 l-40,-40 l40,-40">
　　　　　　　　　M50,40 l20,20 l-20,20 l-20,-20 l20,-20"
　　　　　　　　　style="stroke: "#000000";
　　　　　　　　　fill: "#6666ff";
　　　　　　　　　fill-rule: nonzero;
　　　　　　</path>
<path d="M150,20 l40,40 l-40,40 l-40,-40 l40,-40">
　　　　　　　　　M150,40 l-20,20 l20,20 l20,-20 l-20,-20
　　　　　　　　　style="stroke: "#000000";
　　　　　　　　　fill: "#6666ff";
　　　　　　　　　fill-rule: nonzero;
</svg>

Questi due esempi di percorso hanno ognuno 8 linee, tracciate come diamanti, dove il diamante più grande contiene il più piccolo. Nel percorso di sinistra, il diamante interno è tracciato da sinistra a destra (in senso orario). Nel percorso di destra, il diamante interno è tracciato da destra a sinistra (in senso antiorario). Questo è il risultato dell'uso di fill-rule: non-zero.

Come vedete, la regola nonzero determina la direzione e la forma del diamante interno del disegno. La regola nonzero che determina se un punto è all'interno o all'esterno della forma è:

Traccia una linea (raggio) da un punto a infinito in ogni direzione. Ogni volta che il percorso attraversa questo raggio, se il percorso attraversa il raggio da sinistra a destra, aggiungi 1 al contatore; se il percorso attraversa il raggio da destra a sinistra, sottrai 1 dal contatore. Dopo aver calcolato tutti i percorsi che attraversano il raggio, se il conteggio totale è zero, il punto è considerato fuori dal percorso. Se il conteggio totale non è zero, il punto è considerato all'interno del percorso.

Questo è un esempio di percorso identico, utilizzando fill-rule: evenodd

<svg width="500" height="120">
<path d="M50,20 l40,40 l-40,40 l-40,-40 l40,-40">
　　　　　　　　　M50,40 l20,20 l-20,20 l-20,-20 l20,-20"
　　　　　　style="stroke: "#000000";
　　　　　　fill: "#6666ff";
　　　　　　fill-rule: "evenodd"</path>
<path d="M150,20 l-40,40 l40,40 l40,-40 l-40,-40">
　　　　　　　　　M150,40 l-20,20 l20,20 l20,-20 l-20,-20
　　　　　　style="stroke: "#000000";
　　　　　　fill: "#6666ff";
　　　　　　fill-rule: "evenodd"</path>
</svg>

Effetto immagine dopo l'esecuzione:

Il termine "evenodd" significa letteralmente "dispari-pari". Secondo questa regola, per determinare se un punto si trova all'interno di un grafico, traccia una retta (raggio) in qualsiasi direzione dal punto e verifica il numero di intersezioni tra la retta e il percorso del grafico. Traccia una linea (raggio) da un punto a un punto infinito in qualsiasi direzione. Ogni volta che il percorso attraversa la retta, aumenta un contatore. Se il totale è anche, il punto si trova all'esterno. Se il conteggio totale è dispari, il punto si trova all'interno della forma.