пытаюсь изменить цвет изображения в css при помощи:
.primary svg {
fill: white;
}
.ghost:hover svg {
fill: #FFFFFF;
}
само svg изображение я задал следующим образом:
<img src="/icon-arrow.svg" alt=""/>
Если загружаете svg таким образом - , вам нужен такой скрипт, который преобразует img в svg, и вот потом уже сможете менять ему цвет.
В этой строке - $('.icon-svg img').each - .icon-svg img - это путь до картинок, которые нужно преобразовать, если их на сайте больше, можно через запятую прописывать несколько путей до изображений.
$(document).ready(function () {
$('.icon-svg img').each(function () {
let $img = $(this);
let imgClass = $img.attr('class');
let imgURL = $img.attr('src');
if (imgURL) {
$.get(imgURL, function (data) {
let $svg = $(data).find('svg');
if (typeof imgClass !== 'undefined') {
$svg = $svg.attr('class', imgClass + ' replaced-svg');
}
$svg = $svg.removeAttr('xmlns:a').attr('style', function (i, style) {
return style && style.replace(/enable-background[^;]+;?/g, '');
});
if (!$svg.attr('viewBox') && $svg.attr('height') && $svg.attr('width')) {
$svg.attr('viewBox', '0 0 ' + $svg.attr('height') + ' ' + $svg.attr('width'));
}
if ($svg.attr('viewBox') && !$svg.attr('height') && !$svg.attr('width')) {
let width = $svg.attr("viewBox").split(' ')[2];
let height = $svg.attr("viewBox").split(' ')[3];
$svg.attr('width', width);
$svg.attr('height', height);
}
$img.replaceWith($svg);
}, 'xml');
}
});
});
Если встраивать svg таким способом, то его нельзя менять через css. Необходимо вставить непосредственно сам svg. Или воспользоваться скриптом из предыдущего ответа
<svg> ... </svg>
) в HTML документ вместо изображения (<img ...>
).