Как изменить цвет svg в img

Question

Как изменить цвет svg в img

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

Как изменить цвет svg

img {
    width:50%;
    height: 50%;

}

<link rel="stylesheet" href="css/style.css">

<img class="pic" src="https://upload.wikimedia.org/wikipedia/commons/b/b9/Dollar_sign_in_circle_cleaned_%28PD_version%29.green.svg">

Если я вставлю сам .svg файл в html то это будет занимать 400 over дофига строк кода что не кравиво
Изменять цвет .svg через notepad++ меняя fill= неудобно

Але админы зачем вы классные вопросы закрываете тут есть понятный ответ зачем типа сами делаете хуже Это не дубликат потому что тут вопрос в том не как изменить цвет .svg а в том как его изменит в img теге Также тот вопрос не понятный с непонятным ответом

css html svg

Источник: Stack Overflow на русском

Answer 1

▲ 0

Этот вопрос на на англоязычном StackOverflow тут

Изменить цвет на другой тут

img {
    width:50%;
    height: 50%;

}
.pic {
    filter: invert(58%) sepia(9%) saturate(11%) hue-rotate(350deg) brightness(101%) contrast(91%);
}

<link rel="stylesheet" href="css/style.css">

<img class="pic" src="https://upload.wikimedia.org/wikipedia/commons/b/b9/Dollar_sign_in_circle_cleaned_%28PD_version%29.green.svg">

Вместо src="ссылка" - вставь свой путь к .svg файлу
Скопируй результат с сайта и вставь его в css файл

Answer 2

▲ -1

Я так решаю проблему, но не знаю насколько она вам подойдёт, так как это лишний jquery код замедляющий загрузку страницы.
И в идеале нужно грузить бесцветные svg - обычно они чёрного цвета и на них уже легко накатывать цвет стилями. А на вашей зелёный мешает немного).
Этот скрипт хорошо подходит для проектов, в которых вам нужно создать иконки меняющие цвет при наведении, но при этом которые могут добавляться или меняться через админку контент-менеджером.

(function ($) {
  $(document).ready(function () {
    $('.content img, .menu-list 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');
            }
        });
  });
})(jQuery);

.content svg {
    width:70px;
}
svg .grn {
  fill: red;
  transition: 0.3s;
}
svg:hover .grn {
  fill: green;
}
.menu-list {
  padding: 0;
  margin: 0;
}
.menu-list svg {
  width: 30px;
}
.menu-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  list-style: none;
}

<link rel="stylesheet" href="css/style.css">

<div class="content">
<img src="https://upload.wikimedia.org/wikipedia/commons/b/b9/Dollar_sign_in_circle_cleaned_%28PD_version%29.green.svg">
</div>

<ul class="menu-list">
  <li><img src="https://upload.wikimedia.org/wikipedia/commons/b/b9/Dollar_sign_in_circle_cleaned_%28PD_version%29.green.svg">Строка 1</li>
  <li><img src="https://upload.wikimedia.org/wikipedia/commons/b/b9/Dollar_sign_in_circle_cleaned_%28PD_version%29.green.svg">Строка 2</li>
  <li><img src="https://upload.wikimedia.org/wikipedia/commons/b/b9/Dollar_sign_in_circle_cleaned_%28PD_version%29.green.svg">Строка 3</li>
  <li><img src="https://upload.wikimedia.org/wikipedia/commons/b/b9/Dollar_sign_in_circle_cleaned_%28PD_version%29.green.svg">Строка 4</li>
</ul>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>

Как изменить цвет svg в img

Ответы