Изменение цвета моих значков SVG при наведении

#css #svg #icons #icon-fonts

#css #svg #Значки #значок-шрифты

Вопрос:

Я хочу альтернативу значкам шрифтов. Поэтому я решил создать значки SVG. Я использую Grunt и https://github.com/jkphl/grunt-iconizr . Все работает нормально. Есть мои выходные файлы SCSS с использованием Grunt Iconizr:

Первый

     %icon {
        background-repeat: no-repeat;
    }

    .icon-arrow-down { 
        @extend %icon;
        background-image: url("data:image/svg xml,");
    }

Второй выходной файл, альтернатива первому файлу:

     %icon {
        background-repeat: no-repeat;
    }

    .icon-arrow-down { 
        background-position: 0 0;
        @extend %icon;
        background-image: url(icons/icons.svg);
    }

Я хочу создать эффект наведения на значки. Есть ли какой-либо способ, как я могу создать эффект наведения, используя чистое решение CSS? Я знаю, что могу сделать это с помощью fill: #CCC; property … но только если в моем HTML-коде есть SVG. Если я использую значки шрифтов, это можно легко сделать, изменив свойство CSS color. Есть ли какой-либо способ, с помощью которого я могу изменить цвет прикрепленного SVG background-image: url(...) ?

1. Используя встроенный svg, вы можете поместить имя класса в любую часть файла SVG и изменить цвет и т.д. только для этой части. Проверьте это: css-tricks.com/using-svg

2. Но в этом случае я не смогу создать свой «пакет значков» и использовать значки, только добавив класс CSS в HTML-элемент. Вы думаете, что другого решения нет?

3. Это правильно, добавляя SVG как файл в CSS, вы используете его как файл, а не как код. Если ваш SVG — это сплошной цвет, и вы хотите, чтобы состояние наведения было простым изменением оттенка цвета, вы можете подделать изменение цвета, изменив непрозрачность. В качестве альтернативы, поскольку вы уже создаете «пакет спрайтов», вы можете включить «состояния наведения» значков в сам пакет и изменить положение фона при наведении, чтобы отобразить другой значок.

Ответ №1:

Вы можете добавить opacity значение при наведении:

 .icon-arrow-down:hover { 
    opacity: 0.5;
}

1. Да, Кай, это может быть решением. Но, к сожалению, по умолчанию мне нужно иметь один значок в двух цветах на странице. Например, какая-то стрелка. Я могу сделать его белым в заголовке и черным в остальной части страницы. Я все еще думаю, что использование значков шрифтов будет лучшим решением в этом случае, а не с помощью значков SVG.

2. Когда вы используете SVG в качестве изображения, вы никак не можете изменить содержимое изображения. Поэтому вам понадобится один значок для каждого состояния, если вы используете изображения.