Не могу поменять цвет svg

Рейтинг: 0Ответов: 2Опубликовано: 29.01.2023

пытаюсь изменить цвет изображения в css при помощи:

.primary svg {
    fill: white;
}

.ghost:hover svg {
    fill: #FFFFFF;
}

само svg изображение я задал следующим образом:

<img src="/icon-arrow.svg" alt=""/>

css nextjs reactjs typescript svg
Источник: Stack Overflow на русском

Ответы

▲ 0

Если загружаете 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');
            }
        });
    });

▲ 0

Если встраивать svg таким способом, то его нельзя менять через css. Необходимо вставить непосредственно сам svg. Или воспользоваться скриптом из предыдущего ответа