html
<img src="logo.svg" alt="Logo" class="logo-img">
css
.logo-img path {
fill: #000;
}
Zgornji svg se naloži in je nativno `izpolnjen: #To je moje prvo igranje s SVG in nisem prepričan, zakaj ne deluje.
Če je vaš cilj samo spremeniti barvo logotipa in ni nujno, da potrebujete CSS, potem ne uporabljajte javascripta ali jqueryja, kot je bilo predlagano v nekaterih prejšnjih odgovorih.
Če želite natančno odgovoriti na prvotno vprašanje, samo:
Odprite svoj logo.svg
v urejevalniku besedila.
izpolniti: #fff
in ga zamenjajte z fill: #000
Na primer, vaš logo.svg
je lahko videti takole, ko ga odprete v urejevalniku besedila:
<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>
... samo spremenite polnilo in shranite.
Odgovor @Praveen je zanesljiv.
V svojem delu se nisem mogel odzvati, zato sem naredil funkcijo jquery hover za to.
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');
});