**Non è una cosa che si può fare, ma una cosa che si può fare.
<img src="logo.svg" alt="Logo" class="logo-img">
css
.logo-img path {
fill: #000;
}
Il suddetto svg viene caricato ed è nativamente fill: #fff
ma quando uso il css
di cui sopra per provare a cambiarlo in nero non cambia, questa è la mia prima volta che gioco con SVG e non sono sicuro del perché non funziona.
Se il tuo obiettivo è solo quello di cambiare il colore del logo, e non hai necessariamente bisogno di usare CSS, allora non usare javascript o jquery come è stato suggerito da alcune risposte precedenti.
Per rispondere precisamente alla domanda originale, basta:
Apri il tuo logo.svg
in un editor di testo.
cerca fill: #fff
e sostituiscilo con fill: #000
Per esempio, il tuo logo.svg
potrebbe apparire così quando viene aperto in un editor di testo:
<svg fill="#000000" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
<path d="M0 0h24v24H0z" fill="none"/>
<path d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z" fill="#fff"/>
</svg>
... basta cambiare il riempimento e salvare.
La risposta di @Praveen è solida.
Non riuscivo a farlo rispondere nel mio lavoro, così ho fatto una funzione jquery hover per questo.
CSS
.svg path {
transition:0.3s all !important;
}
JS / JQuery
// code from above wrapped into a function
replaceSVG();
// hover function
// hover over an element, and find the SVG that you want to change
$('.element').hover(function() {
var el = $(this);
var svg = el.find('svg path');
svg.attr('fill', '#CCC');
}, function() {
var el = $(this);
var svg = el.find('svg path');
svg.attr('fill', '#3A3A3A');
});