html
<img src="logo.svg" alt="Logo" class="logo-img">
css
.logo-img path {
fill: #000;
}
Yukarıdaki svg yüklenir ve yerel olarak doldurulur: #Ancak yukarıdaki
css` ile siyah olarak değiştirmeyi denediğimde değişmiyor, SVG ile ilk kez oynuyorum ve neden çalışmadığından emin değilim.
Amacınız sadece logonun rengini değiştirmekse ve CSS kullanmanız gerekmiyorsa, önceki bazı cevaplarda önerildiği gibi javascript veya jquery kullanmayın.
Asıl soruyu tam olarak cevaplamak için, sadece:
Logo.svg`nizi bir metin düzenleyicide açın.
dolgu'yu arayın: #fff
aratın ve fill
ile değiştirin: #000`
Örneğin, logo.svg
dosyanız bir metin düzenleyicide açıldığında aşağıdaki gibi görünebilir:
<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>
... sadece dolguyu değiştirin ve kaydedin.
Praveen'den gelen cevap sağlam.
Çalışmamda yanıt vermesini sağlayamadım, bu yüzden bunun için bir jquery hover işlevi yaptım.
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');
});