Voglio usare questa tecnica http://css-tricks.com/svg-fallbacks/ e cambiare il colore svg ma finora non sono stato in grado di farlo. Ho messo questo nel css ma la mia immagine è sempre nera, non importa cosa. Il mio codice:
.change-my-color {
fill: green;
}
<svg>
<image class="change-my-color" xlink:href="https://svgur.com/i/AFM.svg" width="96" height="96" src="ppngfallback.png" />
</svg>
Per cambiare il colore di qualsiasi SVG puoi cambiare direttamente il codice svg aprendo il file svg in qualsiasi editor di testo. Il codice può apparire come il seguente
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="500px" height="500px" viewBox="0 0 500 500" enable-background="new 0 0 500 500" xml:space="preserve">
<g>
<path d="M114.26,436.584L99.023,483h301.953l-15.237-46.416H114.26z M161.629,474.404h-49.592l9.594-29.225h69.223
C181.113,454.921,171.371,464.663,161.629,474.404z"/>
/*Some more code goes on*/
</g>
</svg>
Potete osservare che ci sono alcuni tag XML come path, circle, polygon etc. Lì puoi aggiungere il tuo colore con l'aiuto dell'attributo style. Guarda l'esempio qui sotto
<path style="fill:#AB7C94;" d="M114.26,436.584L99.023,483h301.953l-15.237-46.416H114.26z M161.629,474.404h-49.592l9.594-29.225h69.223
C181.113,454.921,171.371,464.663,161.629,474.404z"/>
Aggiungete l'attributo style a tutti i tag in modo da ottenere il vostro SVG del colore desiderato
Non puoi cambiare il colore di un'immagine in questo modo. Se carichi SVG come un'immagine, non puoi cambiare come viene visualizzata usando CSS o Javascript nel browser.
Se vuoi cambiare la tua immagine SVG, devi caricarla usando <object>
, <iframe>
o usando <svg>
inline.
Se vuoi usare le tecniche nella pagina, hai bisogno della libreria Modernizr, dove puoi controllare il supporto SVG e visualizzare o meno un'immagine fallback in modo condizionato. Puoi quindi inlineare il tuo SVG e applicare gli stili di cui hai bisogno.
Vedi :
#time-3-icon {
fill: green;
}
.my-svg-alternate {
display: none;
}
.no-svg .my-svg-alternate {
display: block;
width: 100px;
height: 100px;
background-image: url(image.png);
}
<svg width="96px" height="96px" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve">
<path id="time-3-icon" d="M256,50C142.229,50,50,142.229,50,256c0,113.77,92.229,206,206,206c113.77,0,206-92.23,206-206
C462,142.229,369.77,50,256,50z M256,417c-88.977,0-161-72.008-161-161c0-88.979,72.008-161,161-161c88.977,0,161,72.007,161,161
C417,344.977,344.992,417,256,417z M382.816,265.785c1.711,0.297,2.961,1.781,2.961,3.518v0.093c0,1.72-1.223,3.188-2.914,3.505
c-37.093,6.938-124.97,21.35-134.613,21.35c-13.808,0-25-11.192-25-25c0-9.832,14.79-104.675,21.618-143.081
c0.274-1.542,1.615-2.669,3.181-2.669h0.008c1.709,0,3.164,1.243,3.431,2.932l18.933,119.904L382.816,265.785z"/>
</svg>
<image class="my-svg-alternate" width="96" height="96" src="ppngfallback.png" />
Puoi inlineare il tuo SVG, taggare la tua immagine fallback con un nome di classe (my-svg-alternate
):
<svg width="96px" height="96px" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve">
<path id="time-3-icon" .../>
</svg>
<image class="my-svg-alternate" width="96" height="96" src="ppngfallback.png" />
E nel CSS usa la classe no-svg
di Modernizr (CDN: http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.7.2.js ) per controllare il supporto SVG. Se non c'è supporto SVG il blocco SVG sarà ignorato e l'immagine sarà visualizzata, altrimenti l'immagine sarà rimossa dall'albero DOM (display: none
):
.my-svg-alternate {
display: none;
}
.no-svg .my-svg-alternate {
display: block;
width: 100px;
height: 100px;
background-image: url(image.png);
}
Poi si può cambiare il colore dell'elemento sottolineato:
#time-3-icon {
fill: green;
}
il modo più semplice sarebbe quello di creare un font dall'SVG usando un servizio come https://icomoon.io/app/#/select o simili. caricate il vostro SVG, cliccate su "generate font", includete i file del font e il css nel vostro lato e semplicemente usatelo e dategli stile come qualsiasi altro testo. Io lo uso sempre così perché rende lo stile molto più facile.
EDIT: Come menzionato nell'[articolo][1] commentato da @CodeMouse92 i font iconici incasinano gli screen reader (e sono probabilmente dannosi per il SEO). Quindi piuttosto attenetevi agli SVG.