html
<img src="logo.svg" alt="Logo" class="logo-img">
css
.logo-img path {
fill: #000;
}
Ovennevnte svg lastes inn og er nativt fill: #fff
men når jeg bruker ovennevnte css
for å prøve å endre den til svart, endres den ikke, dette er første gang jeg leker med SVG, og jeg er ikke sikker på hvorfor den ikke fungerer.
Hvis målet ditt bare er å endre fargen på logoen, og du ikke nødvendigvis TRENGER å bruke CSS, så ikke bruk javascript eller jquery som det ble antydet i noen tidligere svar.
For å svare nøyaktig på det opprinnelige spørsmålet, bare:
Åpne logo.svg
i et tekstredigeringsprogram.
Se etter fill: #fff
og erstatt den med fill: #000
For eksempel kan logo.svg
se slik ut når den åpnes i et tekstredigeringsprogram:
<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>
... bare endre fyllet og lagre.
Svaret fra @Praveen er solid.
Jeg kunne ikke få det til å svare i arbeidet mitt, så jeg laget en jquery hover-funksjon for det.
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');
});