Как изменить цвет svg объекта, добавленного с помощью img?
Я добавляю svg изображение в HTML разметку с помощью тега .
Изображение чёрно-белое. Необходимо закрасить его, допустим в синий или зелёный цвет. Применение правил CSS для svg fill , stroke не даёт нужного эффекта.
.img1 Есть ли другие способы получить нужный результат?
Отслеживать
Alexandr_TT
задан 28 апр 2019 в 10:16
Alexandr_TT Alexandr_TT
109k 23 23 золотых знака 112 112 серебряных знаков 374 374 бронзовых знака
3 ответа 3
Сортировка: Сброс на вариант по умолчанию
Когда файл SVG добавлен на страницу HTML с помощью тега , то он ничем не отличается от обычного изображения растрового формата. Поэтому невозможно применить стили из внешней таблицы.
Но есть возможность изменить цвет фигур svg с помощью фильтров CSS или SVG.
Цвет SVG фильтра можно установить любой.
- В примере ниже изображение будет покрашено в синий цвет
.container < width:100%; height:100%; background:#d3d3d3; overflow:hidden; >.container:hover < background:black; >img
Используя два фильтра, можно реализовать эффект наведения:
img < filter:url(#filter_B); >img:hover
Ниже полный код:
.container < width:100%; height:100%; background:#d3d3d3; overflow:hidden; >.container:hover < background: black; >img < filter: url(#filter_B); >img:hover Изменении цвета svg img , без js
Внутрь картинки вставленной через залезть нельзя никак.
13 апр 2017 в 16:19
Посмотрите второй ответ, — покраска CSS фильтрами. Хоть они и уступают по функиональности svg фильтрам, но их вполне можно успешно применять.
5 июн 2019 в 8:12
3 ответа 3
Сортировка: Сброс на вариант по умолчанию
Когда файл SVG добавлен на страницу HTML с помощью тега , то он ничем не отличается от обычного изображения растрового формата. Поэтому невозможно применить стили из внешней таблицы fill=»red» .
Но есть возможность изменить цвет фигур svg с помощью фильтров CSS или SVG.
Цвет SVG фильтра можно установить любой.
.container < width:100%; height:100%; background:#d3d3d3; overflow:hidden; >.container:hover < background: black; >img < filter: url(#filter_B); >img:hover 2. Покрасить иконки в разные цвета при наведении, используя фильтр feColorMatrix
.R1:hover < filter:url(#RedFilter); >.G1:hover < filter:url(#GreenFilter); >.B1:hover
3. Покрасить иконки в разные цвета при наведении, используя комбинацию фильтров feComposite , feBlend
.icon < width:25vw; filter:url(#solid); >.icon:hover Как изменить цвет иконки SVG с помощью CSS?
На странице есть иконки в формате SVG . Сами иконки нарисованы в черном цвете.
Как с помощью CSS покрасить их их в красный цвет?
Отслеживать
109k 23 23 золотых знака 112 112 серебряных знаков 374 374 бронзовых знака
задан 6 янв 2019 в 7:31
ObehanProger ObehanProger
1,400 2 2 золотых знака 14 14 серебряных знаков 34 34 бронзовых знака
посмотрите тут: css-tricks.com/almanac/properties/f/fill
6 янв 2019 в 7:42
3 ответа 3
Сортировка: Сброс на вариант по умолчанию
В данном контексте, когда svg у вас лежит отдельно в виде файла, через CSS ничего сделать нельзя. Нужно вставить svg в html текстом, тогда появится возможность использовать в css свойство fill к тегу svg и его вложенным тегам.
Отслеживать
ответ дан 6 янв 2019 в 7:49
Andrei Fedorov Andrei Fedorov
5,791 1 1 золотой знак 9 9 серебряных знаков 31 31 бронзовый знак
Если SVG иконка добавлена отдельным файлом с помощью тега , то это тоже самое, как добавить растровое изображение, к которому невозможно применить изменение цвета с помощью CSS правил. Возможно только поменять цвет background .
Но есть способ сделать изменение цвета иконки с помощью фильтров CSS или SVG
Допустим добавлена иконка ключа с помощью :
С помощью различных css фильтров меняем цвет иконок:
.container < display:inline-block; width:25%; height:25%; padding:1.5em; background: rgb(123,215,193); background: linear-gradient(90deg, rgba(123,215,193,1) 4%, rgba(225,233,148,1) 97%); >.key < height: 3em; width: 3em; >.grey-out < opacity: 0.4; -webkit-filter: grayscale(100%); filter: grayscale(100%); >.hue-rotate < -webkit-filter: hue-rotate(90deg); filter: hue-rotate(90deg); >.invert
Пример, если svg файл добавлен с помощью background-image:
.key < background-image: url("https://twemoji.maxcdn.com/svg/1f506.svg"); display: inline-block; background-repeat: no-repeat; background-position: center center; height: 3em; width: 3em; margin: 0 0.15em 0 0.3em; vertical-align: -0.3em; background-size: 3em 3em; >.grey-out < opacity: 0.4; -webkit-filter: grayscale(100%); filter: grayscale(100%); >.hue-rotate < -webkit-filter: hue-rotate(90deg); filter: hue-rotate(90deg); >.invert
Вариант с изменением цвета при наведении
.container < display: -webkit-flex; display: flex; width:35%; height:35%; >.key < height: 3em; width: 3em; padding: 1em; transition: 0.8s; >:hover.key < height: 4em; width: 4em; -webkit-filter: hue-rotate(320deg); filter: hue-rotate(320deg); >.grey-out < opacity: 0.4; -webkit-filter: grayscale(100%); filter: grayscale(100%); >.hue-rotate < -webkit-filter: hue-rotate(90deg); filter: hue-rotate(90deg); >.invert
Менять цвет svg иконки при наведении
Мне нужно чтобы при наведении на иконку менялся цвет с серого на градиент синего (есть исходники обеих вариантов). На скрине видно что мне требуется. Так же иконки должны быть с плавной анимацией и быть кликабельными (переводить на другой сайт). Буду очень благодарен за помощь.
Отслеживать
10.4k 3 3 золотых знака 12 12 серебряных знаков 34 34 бронзовых знака
задан 17 июн 2020 в 11:01
und3rl0w3r und3rl0w3r
11 1 1 бронзовый знак
Иконки встроены в разметку или указаны в стилях?
17 июн 2020 в 11:08
встроены в разметку
17 июн 2020 в 11:20
2 ответа 2
Сортировка: Сброс на вариант по умолчанию
.icon-link svg < transition: fill 0.3s linear; >.icon-link:hover svg
В примере стилей используется свойство fill . В зависимости от иконки так же может использоваться свойство stroke .