html
<img src="logo.svg" alt="Logo" class="logo-img">
css
.logo-img path {
fill: #000;
}
Горният svg се зарежда и е естествено запълнен: #Когато използвам горния
css`, за да се опитам да го променя на черен, той не се променя, за първи път си играя със SVG и не съм сигурен защо не работи.
Ако целта ви е само да промените цвета на логото и не е задължително да използвате CSS, тогава не използвайте javascript или jquery, както беше предложено в някои предишни отговори.
За да отговорите точно на първоначалния въпрос, просто:
Отворете вашия logo.svg
в текстов редактор.
потърсете запълване: #fff
и го заменете с fill: #000
Например вашият файл logo.svg
може да изглежда така, когато се отвори в текстов редактор:
<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>
... просто променете запълването и запазете.
Отговорът на @Praveen е солиден.
Не можах да го накарам да реагира в моята работа, затова направих jquery hover функция за него.
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');
});
Защо да не създадете уеб шрифт с вашето SVG изображение или изображения, да импортирате уеб шрифта в css и след това просто да промените цвета на глифа, като използвате атрибута за цвят на css? Не е необходим javascript