CSS SVG Color
Esempio 1
Per iniziare a scrivere HTML, apri il codice Visual Studio e crea un nuovo file e scegli HTML come lingua. Il file è stato creato e tutto ciò che rimane è quello di aggiungere "!"Segna in questo file vuoto che viene creato qui per ottenere i tag di base. Dopo, premendo "Enter" fa apparire tutti i tag di base dell'HTML nel file. Il corpo è dove iniziamo il processo di codifica. Posizioniamo un tag "SVG". Questo tag "SVG" viene utilizzato qui per definire il contenitore per l'immagine SVG. Mettiamo il "cerchio" all'interno del tag "SVG" per la creazione di un cerchio SVG. E poi chiudere il tag "SVG". Ora stiamo creando il file CSS e iniziando la codifica nel file CSS per applicare il colore a questo cerchio SVG. Colleghiamo anche il file CSS a questo file HTML corrente utilizzando il tag "collegamento" nella "testa."
Ecco il codice CSS in cui impostiamo la "larghezza" di "SVG" come "300px" e "l'altezza" di questo "SVG" è "300px". Stiamo usando "tratto" qui perché quando dobbiamo aggiungere un po 'di bordo a questo cerchio "SVG". Impostiamo il valore "ictus" come "rosso."Abbiamo anche impostato la sua larghezza usando la" larghezza della corsa "e abbiamo impostato questa" larghezza di tratto "su" 4px ". Ora stiamo colorando questo cerchio SVG con l'aiuto della proprietà "riempimento" di CSS. Usiamo questa proprietà "riempimento" quando dobbiamo] per colorare qualsiasi grafica SVG. Qui abbiamo il cerchio SVG e stiamo aggiungendo colore a questo cerchio SVG, quindi usiamo la proprietà "riempi". Abbiamo impostato questo valore della proprietà "riempimento" come "giallo."
Puoi vedere il cerchio nell'output; Il colore di questo cerchio SVG è giallo perché abbiamo aggiunto questo colore usando la proprietà "riempimento" in CSS e il bordo di questo cerchio SVG è di colore rosso perché abbiamo usato la proprietà "tratto" nel codice CSS.
Esempio 2
Stiamo creando due SVG rettangolo qui posizionando il "div" e all'interno di questo "div", abbiamo due diversi "SVGS."Usiamo" rect "per la creazione di un rettangolo. Qui usiamo due retti con i nomi "rect1" e "rect2" all'interno dell'SVG e quindi chiudono il "div" qui. Ora applicheremo colori diversi a questi SVG rettangolo utilizzando le proprietà CSS.
Allineiamo tutti gli elementi del "corpo" al "centro."Quindi, applichiamo il colore" rosso "all'intestazione e" algerino "che usiamo come" Font-Family."Lo modelliamo anche questa intestazione in" corsivo."" Altezza "del primo SVG" RECT1 "è" 300px "e la" larghezza "che stiamo usando qui è" 500px ". "Riempiamo" questo rettangolo con "giallo" in quanto è la forma SVG, quindi usiamo "riempi" qui. Quindi impostiamo la stessa altezza e larghezza al rettangolo SVG successivo e "riempire" questo rettangolo con "Purple."
Ci sono due rettangoli SVG nell'output. Usiamo le proprietà CSS per colorare questi rettangoli SVG. Entrambi i rettangoli sono SVGS.
Esempio 3
In questo codice, stiamo creando un poligono SVG, quindi usiamo il tag "SVG" e creiamo un "poligono" qui definendo i punti del poligono e chiudendo il tag "SVG".
Stiamo utilizzando il carattere "algerino" e il colore "viola" per l'intestazione. Abbiamo impostato "SVG" "larghezza" e "altezza" come "300px" e "200px", rispettivamente. Quindi utilizziamo la proprietà "riempi". Abbiamo impostato questo "riempimento" su "rosa" in modo che il colore poligono apparirà "rosa."Abbiamo anche messo alcuni bordi per questo poligono, quindi stiamo usando" ictus "per dare il colore del bordo, che abbiamo fissato come" viola."Abbiamo impostato la larghezza di questo confine utilizzando la proprietà" ictus-width "e la impostata su" 5 ". Quindi utilizziamo la "regola del riempimento", che viene utilizzata per determinare la parte interna del poligono e impostarla su "pari over."
Qui, vedi una stella che si chiama anche poligono. Questo poligono è il poligono SVG e colormo questo poligono SVG qui in questo esempio usando la proprietà "riempimento".
Esempio 4
Genereremo tre diverse icone qui, quindi stiamo usando il tag "I" in questo file HTML. Diamo nomi diversi a ogni icona, quindi; Imposteremo un colore diverso per ogni icona SVG.
Per prima cosa abbiamo impostato "icona", "larghezza" e "altezza" ed entrambi sono impostati come "100px". Abbiamo anche impostato queste icone in una riga, quindi utilizziamo la proprietà "display" e la impostiamo su "Inline-block."Ora, nella" maschera webkit ", diamo" URL "dell'immagine SVG e impostiamo la" dimensione della maschera Webkit "su" Cover."Inoltre, la" dimensione della maschera "è" copertina "qui. Quindi applicheremo i colori a queste icone SVG con l'aiuto della proprietà "color sfondo". Abbiamo impostato "rosso" per la prima icona SVG, "rosa" come "colore di sfondo" per la seconda icona SVG e il colore "giallo" per la terza icona SVG.
Tutte e tre le icone SVGS appaiono in colori diversi perché impostiamo questi colori in CSS applicando la proprietà a base di sfondo a tutte queste icone separatamente.
Esempio 5
Qui, stiamo usando la versione "XML" e quindi dare qui il percorso dell'icona SVG, e quindi cambieremo il colore di questa icona in bilico, e questo sarà fatto nel codice CSS.
Abbiamo impostato il colore di questa icona usando la proprietà "riempimento", in quanto è l'icona SVG, quindi è per questo che stiamo usando "riempi" qui. Lo impostiamo “nero."Questa icona apparirà in nero. Usiamo anche "hover" con questa "icona" e setiamo "riempimento" "arancione", quindi quando litighiamo il mouse su questa icona SVG, il colore di questo cambierà in "arancione", poiché abbiamo impostato "arancione" qui Nel "riempimento" di "Hover."Il" allineamento del testo "si inserisce su" Centro "e" l'imbottitura "che stiamo usando qui è" 2em ".
Il primo output si mostra prima del mouse e puoi notare che il colore di questa icona SVG appare in nero, che abbiamo impostato nel codice CSS, ma quando ci libramo su questa icona SVG, le sue modifiche al colore e puoi vederlo in il prossimo output.
In questo secondo output, il colore dell'icona SVG rende "arancione" perché abbiamo impostato "arancione" come "riempimento" quando ci libramo su questa icona SVG in CSS.
Conclusione
Questo tutorial è stato creato per aiutarti a comprendere le proprietà CSS, che ci consente di colorare SVG. Questo tutorial ha coperto questo concetto in grande profondità. Abbiamo presentato cinque diversi esempi qui in cui progettiamo diversi SVG e quindi color quegli SVG e abbiamo cambiato il colore di diverse icone SVGS. Abbiamo fornito gli output di tutti questi codici in questo tutorial. Abbiamo utilizzato due proprietà qui per applicare il colore agli SVG, che erano proprietà "riempimento" e "color sfondo", e le abbiamo spiegate in dettaglio qui. Dopo aver seguito attentamente questo tutorial, spero che sarai in grado di colorare gli SVG utilizzando queste proprietà in CSS.