Изменить цвет заливки SVG, когда он используется в качестве фонового изображения
Размещение SVG-вывода непосредственно в строке с кодом страницы. Я могу просто изменить цвета заливки с помощью CSS следующим образом:
polygon.mystar < fill: blue; > circle.mycircle
Это отлично работает, однако я ищу способ изменить атрибут «fill» SVG, когда он будет использоваться как BACKGROUND-IMAGE.
html < background-image: url(../img/bg.svg); >Как я могу изменить цвета сейчас? Возможно ли это? Для справки, вот содержимое моего внешнего файла SVG:
Joe 13 нояб. 2012, в 20:55
Поделиться
Меня часто бьют реквизитом за мой ответ. Вы должны рассмотреть вопрос об изменении его на принятый ответ, чтобы он не был пропущен.
Ryan 07 июль 2017, в 20:54
Поделиться:
14 ответов
Лучший ответ
Один из способов сделать это — обслуживать ваш svg с какого-либо серверного механизма. Просто создайте сторону сервера ресурсов, которая выводит ваш svg в соответствии с параметрами GET, и вы обслуживаете его по определенному URL.
Тогда вы просто используете этот URL в вашем CSS.
Потому что, как фоновое изображение, оно не является частью DOM, и вы не можете им манипулировать. Другой возможностью было бы использовать его регулярно, встраивать его в страницу обычным способом, но расположить его абсолютно, сделать его полной шириной и высотой страницы, а затем использовать свойство z-index css, чтобы поместить его позади всех других элементов DOM. на странице.
tonino.j 13 нояб. 2012, в 20:08
Поделиться
Не забудьте, если вы обслуживаете SVG из серверного скрипта, чтобы убедиться, что вы также отправляете правильный заголовок MIME . В PHP это будет:
Saul Fautley 21 авг. 2014, в 10:53
Вы можете использовать изображение SVG в качестве маски и манипулировать цветом фона элемента. Это будет иметь тот же эффект, что и изменение заливки. (подробный ответ предоставлен)
widged 03 авг. 2015, в 23:32
Этот ответ был замечательным с 2012 года, но теперь CSS-маски и / или фильтры поддерживаются во всех браузерах в течение некоторого времени. Я рекомендую всем, кто читает это сейчас, проверить ссылки в ответе widged ниже или просто перейти к CSS Masks здесь , что является действительно простым решением — обратите внимание, что для него все еще требуется 2 версии правила, одна с префиксом -webkit- в настоящее время время. Для Microsoft Edge в настоящее время фильтры CSS поддерживаются, но еще не маскируются.
joelhardi 04 июль 2017, в 17:09
В настоящее время существует множество решений, которые работают, и я согласен, что этот ответ больше не отражает текущее состояние возможностей.
David Neto 20 дек. 2018, в 23:15
Показать ещё 2 комментария
Мне нужно было что-то похожее и хотелось придерживаться CSS. Здесь используются слайсы LESS и SCSS, а также простой CSS, который может помочь вам в этом. К сожалению, поддержка браузера немного слаба. Подробнее о поддержке браузера см. Ниже.
.element-color(@color) < background-image: url('data:image/svg+xml;utf8,'); > .element-color(#fff); @mixin element-color($color) < background-image: url('data:image/svg+xml;utf8,'); > @include element-color(#fff); // color: red background-image: url('data:image/svg+xml;utf8,'); Вот подробнее о внедрении полного SVG-кода в ваш файл CSS. В нем также упоминается совместимость с браузером, которая слишком мала, чтобы это было жизнеспособным вариантом.
Ryan 07 янв. 2015, в 20:10
Поделиться
Хотя есть некоторые накладные расходы, потому что я должен жестко закодировать все элементы SVG, я думаю, что это лучшее решение на некоторое время. Спасибо
Adriano Rosa 19 окт. 2015, в 15:16
Вам нужно использовать CSS-препроцессор, такой как Sass или Less, если вы хотите использовать таким образом. Если вы не используете один, вам просто нужно использовать эту линию фонового изображения для каждого цвета
Friendly Code 29 апр. 2016, в 18:03
Обратите внимание, что вы должны urlencode символа # для ваших шестнадцатеричных цветов, чтобы это работало в Firefox. Поэтому что-то вроде становится .
Swen 11 май 2016, в 12:17
Сладкий метод. Вы должны жестко закодировать SVG в фоновое изображение, как это? Можете ли вы просто не ссылаться на него как-нибудь?
luke 29 июль 2016, в 19:23
@ Лук, я не изучал этот вариант. Я предполагаю, что с заданием gulp вы могли бы импортировать из другого файла, но я не уверен, что вы могли бы сделать это динамически. Вы должны попробовать это все же! Может быть сладким.
Ryan 14 окт. 2016, в 15:56
Немного опоздал на вечеринку, но как бы вы поступили с SASS?
kstratis 07 июль 2017, в 16:33
@kstratis Файлы SASS и SCSS могут импортировать друг друга, поэтому пример SCSS должен быть действительным и для SASS.
Tsunamis 14 июль 2017, в 10:24
Проблема с этим методом в том, что вы пропускаете кеш браузера.
Kareem 17 март 2018, в 08:00
Показать ещё 6 комментариев
Еще один подход — использовать маску. Затем вы меняете цвет фона маскируемого элемента. Это имеет тот же эффект, что и изменение атрибута заполнения svg.
glyph < display: inline-block; width: 24px; height: 24px; >glyph.star < -webkit-mask: url(star.svg) no-repeat 100% 100%; mask: url(star.svg) no-repeat 100% 100%; -webkit-mask-size: cover; mask-size: cover; background-color: yellow; >glyph.heart
Здесь вы найдете полный учебник: http://codepen.io/noahblon/blog/coloring-svgs-in-css-background-images (а не мой собственный). Он предлагает множество подходов (не ограничиваясь только маской).
widged 03 авг. 2015, в 23:39
Поделиться
На это следует обратить внимание, это поддержка браузера. Я считаю, что IE (как обычно) сильно отстает в этом.
Matthew Johnson 12 янв. 2016, в 16:01
К сожалению, mask не поддерживается ни IE, ни Edge: caniuse.com/#search=mask
alpipego 30 март 2016, в 08:09
Ни Firefox. developer.mozilla.org/en/docs/Web/CSS/mask-image
Caleb 20 дек. 2016, в 19:57
У меня в Chrome тоже не работает. Изменить: О НВМ . У меня не включен авторефикс. Я думал, что поставщики должны были прекратить использовать префиксы ?!
mpen 30 янв. 2017, в 17:25
Не работает в IE 11 (11.608.15063.0)
Andrei Krasutski 01 окт. 2017, в 08:07
Работает в последней версии Chrome и Firefox
tic 14 март 2019, в 15:20
Показать ещё 4 комментария
Вы можете использовать CSS-маски. С помощью свойства ‘mask’ вы создаете маску, которая применяется к элементу.
.icon
Adel 24 окт. 2017, в 08:54
Поделиться
Это должно быть помечено как правильный ответ.
Dale Nguyen 05 фев. 2018, в 16:30
это хорошо, но при применении к значку в поле ввода весь вводимый текст скрыт.
raison 12 фев. 2018, в 14:54
Не поддерживается в IE
Kareem 17 март 2018, в 08:11
Супер крутой ответ, но вы больше не можете использовать цвет фона при наведении или что-то в этом роде
Paul Kruger 08 авг. 2018, в 11:21
Похоже, что это вряд ли поддерживается — слишком много пользователей не смогут увидеть это, чтобы оно было жизнеспособным сегодня в конце 2018 года. Caniuse.com/#feat=css-masks
Chris Moschini 28 нояб. 2018, в 16:27
Показать ещё 3 комментария
Это возможно с Сасс! Единственное, что вам нужно сделать, это URL-код вашего кода svg. И это возможно с помощью вспомогательной функции в Sass. Я сделал код для этого. Посмотрите на это:
// choose a color $icon-color: #F84830; // functions to urlencode the svg string @function str-replace($string, $search, $replace: '') < $index: str-index($string, $search); @if $index < @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace); >@return $string; > @function url-encode($string) < $map: ( "%": "%25", "": "%3E", " ": "%20", "!": "%21", "*": "%2A", "'": "%27", '"': "%22", "(": "%28", ")": "%29", ";": "%3B", ":": "%3A", "@": "%40", "&": "%26", "=": "%3D", "+": "%2B", "$": "%24", ",": "%2C", "/": "%2F", "?": "%3F", "#": "%23", "[": "%5B", "]": "%5D" ); $new: $string; @each $search, $replace in $map < $new: str-replace($new, $search, $replace); >@return $new; > @function inline-svg($string) < @return url('data:image/svg+xml;utf8,#'); > // icon styles // note the fill="' + $icon-color + '" .icon < display: inline-block; width: 50px; height: 50px; background: inline-svg(''); > Philipp Kühn 21 июнь 2015, в 11:26
Поделиться
Это работает очень хорошо. Единственная проблема: в IE10 значок слишком маленький (я думаю, 10% от заданного размера.
Henning Fischer 24 май 2016, в 15:05
Загрузите svg как текст.
Измените текст svg с помощью javascript, чтобы изменить цвет краски/штриха/заливки [s].
Затем вставьте модифицированную строку svg inline в ваш css, как описано здесь.
jedierikb 24 нояб. 2013, в 17:34
Поделиться
Теперь вы можете добиться этого на стороне клиента следующим образом:
var green = '3CB54A'; var red = 'ED1F24'; var svg = ' '; var encoded = window.btoa(svg); document.body.style.background = "url(data:image/svg+xml;base64,"+encoded+")"; tnt-rox 14 авг. 2014, в 10:13
Поделиться
Вам следует избегать использования Base64 для SVG, так как он не нужен, увеличивает размер ваших файлов и даже не позволяет GZIP эффективно сжимать эти фрагменты кода.
inta 17 янв. 2017, в 16:53
Эта кодировка происходит на стороне клиента, вероятно, только для полного выхода .
diachedelic 06 нояб. 2017, в 06:37
Вы можете сохранить SVG в переменной. Затем манипулируйте строкой SVG в зависимости от ваших потребностей (т.е. Установите ширину, высоту, цвет и т.д.). Затем используйте результат для установки фона, например.
$circle-icon-svg: ''; $icon-color: #f00; $icon-color-hover: #00f; @function str-replace($string, $search, $replace: '') < $index: str-index($string, $search); @if $index < @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace); >@return $string; > @function svg-fill ($svg, $color) < @return str-replace($svg, '"'); > @function svg-size ($svg, $width, $height) < $svg: str-replace($svg, '"'); $svg: str-replace($svg, '"'); @return $svg; > .icon < $icon-svg: svg-size($circle-icon-svg, 20, 20); width: 20px; height: 20px; background: url('data:image/svg+xml;utf8,#'); &:hover < background: url('data:image/svg+xml;utf8,#'); > > Этот код делает несколько предположений о SVG, например. что элемент не имеет существующего цвета заливки и не заданы ни свойства ширины, ни высоты. Поскольку вход жестко закодирован в документе SCSS, довольно легко обеспечить соблюдение этих ограничений.
Не беспокойтесь о дублировании кода. gzip сжатие делает незначительную величину незначительной.
Gajus 30 окт. 2015, в 14:05
Поделиться
.icon < width: 48px; height: 48px; display: inline-block; background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/18515/heart.svg) no-repeat 50% 50%; background-size: cover; >.icon-orange < -webkit-filter: hue-rotate(40deg) saturate(0.5) brightness(390%) saturate(4); filter: hue-rotate(40deg) saturate(0.5) brightness(390%) saturate(4); >.icon-yellow
Elbaz 11 апр. 2017, в 09:00
Поделиться
Этот метод применяет фильтр ко всему объекту, включая детей.
Krzysztof Antoniak 14 июнь 2017, в 13:28
И широко поддерживается! caniuse.com/#feat=css-filters
Chris Moschini 28 нояб. 2018, в 17:21
Для этого вы можете создать свою собственную функцию SCSS. Добавьте в файл config.rb следующее.
require 'sass' require 'cgi' module Sass::Script::Functions def inline_svg_image(path, fill) real_path = File.join(Compass.configuration.images_path, path.value) svg = data(real_path) svg.gsub! '', fill.value encoded_svg = CGI::escape(svg).gsub('+', '%20') data_url = "url('data:image/svg+xml;charset=utf-8," + encoded_svg + "')" Sass::Script::String.new(data_url) end private def data(real_path) if File.readable?(real_path) File.open(real_path, "rb") <|io| io.read>else raise Compass::Error, "File not found or cannot be read: #" end end end Затем вы можете использовать его в своем CSS:
.icon < background-image: inline-svg-image('icons/icon.svg', '#555'); >Вам нужно будет отредактировать ваши SVG файлы и заменить любые атрибуты заполнения в разметке fill = «»
Путь значков всегда относится к вашему параметру images_dir в том же файле config.rb.
Как и в некоторых других решениях, но это довольно чисто и сохраняет ваши файлы SCSS в порядке.
Как поменять цвет SVG
Напишите подробнее что у вас в переменной содержится и что значит «уже заданы»? Ведь задавать можно по-разному, например в подключенном к документу CSS.
– user347472
14 окт 2020 в 8:05
1 ответ 1
Сортировка: Сброс на вариант по умолчанию
Удалите с вашего svg-файла любое явное задавание цвета и повесьте на тег path атрибут fill=»currentColor» . После этого вы сможете задавать цвет иконки через стили:
Отслеживать
ответ дан 15 окт 2020 в 22:13
MobiDevices MobiDevices
7,291 5 5 золотых знаков 27 27 серебряных знаков 69 69 бронзовых знаков
- html
- css
-
Важное на Мете
Похожие
Подписаться на ленту
Лента вопроса
Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.
Дизайн сайта / логотип © 2023 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2023.11.15.1019
Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.
Как задать цвет SVG? — Вопросы по CSS
Сегодня важный день для проекта Joomla! Мы отмечаем два года напряженной работы наших добровольцев, решивших выпускать новую основную версию каждые два года. После большого количества обсуждений, спринтов по написанию кода и устранения ошибок этот день наконец настал и мы с гордостью объявляем о выпуске новой мажорной ( major ) версии Joomla 5.0, наряду с Joomla 4.4.
В Joomla Extensions Directory появился тег совместимости с Joomla 5.
Joomla-разработчики, проверившие совместимость своих расширений с Joomla 5 могут поставить галочку ��
JoomlaDay Spain, Madrid.
В Мадриде, Испания 5-6 октября 2023 года проходит Joomla Day — конференция, посвящённая как новичкам, так и профессионалам, работающим с Joomla.
Как поменять цвет svg в css
Один из способов вывести картинку в формате «.svg» — это вывод в стандартном теге картинки «img»:
И здесь опять НО! Не на все виды «svg» можно накладывать маску!
Изменить цвет в стандартном теге img цвет картинки svg — изменить нельзя!
Попробуем другим способом:
Изменение цвета картинки в теге svg
Наверное самый простой способ изменить цвет svg — это изменение в самом теге svg, для этого вам понадобится:
Svg код картинки:
Выведем его прямо здесь:
Внутрь тега «path» — добавляем цвет fill=»red»
Пример изменения цвета svg .
Выведем выше приведенный код svg с измененным цветом:
Пример №2 изменения цвета svg .
Изменим цвет svg теперь в желтый :
Результат покраски картинки svg в желтый.
Как изменить цвет у svg картинки в теге div
Мы можем изменить цвет «svg» — если обернем наш svg в тег. напримерdiv, для этого вам понадобится:
В тег помещаем все наши стили, с размером и задним фоном(background) который и будет красить наш svg:
Соберем весь код вместе:
Код изменения цвета svg используя тег div
Результат изменения цвета svg картинки.
Далее возьмем выше приведенный код с изменным цветом svg и разместим его прямо здесь, чтобы увидеть результат:
Как подобрать/изменить цвет svg через исследовать элемент?
Можно изменять и подбирать цвет обычным образом, через исследовать элемент по блоку, справа находим background, нажимаем, выбираем нужный цвет для «svg»
Новый цвет svg(пример)
вы подобрали новый цвет для svg, код получился:
Заносим код в стили и получаем svg другого цвета.
Выведем новый svg с новым цветом:
Изменение цвета svg с помощью mask-image
Файл svg, который должен существовать физически:
Создадим новый div + добавим ему произвольный class
С помощью стилей добавим с помощью «mask-image» наш svg:
Соберем весь код svg:
Код svg изменения цвета с помощью mask-image
Пример изменения цвета svg с помощью mask-image
Далее. нам остается только и всего-то . вывести данный код на страницу:
Изменение цвета svg используя use + symbol + fill
Рассмотрим еще один из способов покрасить svg будем использовать «use + symbol + fill» — для этого вам понадобится:
Выведем его прямо здесь:
Добавим в тег svg attribute style + position absolute(style=»position:absolute;left: 10000000000px;») — это значит. что нам не нужно чтобы данный код выводился где-то на странице, поэтому переместим его куда-то за пределы монитора.
Внутрь svg помещаем тег «symbol» + произвольный id:
Соберем код нашего первого svg:
Вы создали svg изображение к которому мы можем обратиться!
Меняем цвет svg используя use + symbol + fill
Для этого вам опять понадобится проделать несколько манипуляций:
Снова создаем «svg» помещаем в первый тег произвольный class
Пропишем свойства для класса block: удалим все padding-и и margin-и, добавим высоту и ширину!
Во внутрь нашего нового svg помещаем тег «use», где обращаемся к тому id, который в самом начале(в данном пункте первый svg).
+ добавим цвет с помощью fill=»red» :
Соберем код нашего нового покрашенного svg:
Выведем данный код прямо здесь:
Пример изменения цвета svg используя use + symbol + fill
Несколько примеров использования «use + symbol + fill».
Не забываем о первом svg в данном пункте. — он у нас где то слева за пределами монитора!
Заливка и обводка
Есть несколько способов раскрасить фигуры SVG (в т.ч. с указанием атрибутов объекта), используя инлайн-CSS, встроенную CSS-секцию, или внешний файл CSS. Большая часть SVG, которую вы встретите в интернете, использует встроенный CSS, однако преимущества и недостатки есть у каждого типа.
Атрибуты заливки и обводки (Fill and Stroke Attributes)
Раскраска (Painting)
Основная раскраска может быть сделана установкой двух свойств на ноде — fill и stroke. Fill — устанавливает цвет внутри объекта, а stroke задаёт цвет линии, которая рисуется вокруг объекта. Вы можете использовать CSS-наименования цветов, что и в HTML — названия цветов (например, red), rgb-значения, hex-значения, rgba-значения и т.д.
Кроме того, вы можете задать прозрачность заливке и обводке по отдельности в SVG. Их прозрачность управляется атрибутами fill-opacity, stroke-opacity.
Обводка (Stroke)
Кроме цветовых свойств обводки, есть несколько атрибутов, управляющих способом обводки.
Свойство stroke-width определяет ширину обводки. Штрихи обводки рисуются вокруг пути. В примере выше путь изображён розовым, а обводка — черным.
Второй атрибут, влияющий на обводку — свойство stroke-linecap. Демонстрируется выше. Свойство управляет отображением концов линий.
Есть три возможных значения для stroke-linecap:
- butt обрывает линию под прямым углом к направлению обводки и делает это сразу по окончании линии.
- square в основном действует также, но немного растягивает обводку по краям пути. Длина, на которую продлевается обводка — это половина заданного значения stroke-width.
- round задаёт закруглённые углы по краям обводки. Радиус этих кривых также управляется параметром stroke-width.
Используйте stroke-linejoin , чтобы определить, как соединять обводку двух сегментов линии.
Каждая из этих полилиний имеет два сегмента. Соединение, где они встречаются, управляется атрибутом stroke-linejoin . Есть три возможных значения для этого атрибута:
- miter продолжает линию обводки дальше её обычной ширины, чтобы создать единственный квадратный угол.
- round создаёт закруглённый сегмент линии
- bevel создаёт новый угол для помощи в переходе между двумя сегментами
Наконец, вы можете использовать пунктирные линии в обводке, определив атрибут stroke-dasharray .
В качестве аргумента атрибут stroke-dasharray принимает последовательность чисел, разделённых запятой.
Замечание: в отличие от путей, эти числа ДОЛЖНЫ быть разделены запятыми (пробелы игнорируются).
Первое число определяет длину штриха, второе — длину между штрихами. В примере выше, второй путь чередует заливку штрихом в 5 пикселей, затем 5 пустых пикселей перед следующим штрихом в 5 пикселей. Вы можете задать больше чисел, если хотите более сложную систему штрихов. В первом примере задано 3 числа и в этом случае рендер берёт эти числа дважды, чтобы создать чётный паттерн. Т.о. первый путь отображается 5 закрашенными, 10 пустыми, 5 закрашенными и затем ещё раз 5 пустыми, 10 закрашенными, 5 пустыми «пикселями». Затем паттерн повторяется.
Также есть дополнительные stroke и fill свойства: fill-rule, которое определяет как будут заливаться сложные фигуры, которые имеют пересечения внутри себя; stroke-miterlimit, which determines if a stroke should draw miters и stroke-dashoffset, который указывает где начинается dash-array в линии (позволяет задать смещение пунктирной обводки относительно первоначального положения)
Использование CSS (Using CSS)
В дополнение к установке атрибутов объектов, вы также можете использовать CSS для стилизации заливки и обводки. Не все атрибуты могут быть установлены через CSS. Но атрибуты взаимодействия с раскраской и заливкой обычно доступны, так что fill, stroke, stroke-dasharray и т.д. могут быть заданы этим способом, также как и градиенты, и паттерны, что показано ниже. Атрибуты вроде width, height или команд для путей SVG не могут быть установлены через CSS. Проще всего просто протестировать и узнать, что доступно, а что нет.
CSS может использоваться инлайн через атрибут style :
или может быть помещён в специальную стилевую секцию, которую вы включите. Вместо отображения такой секции в разделе , как это делается в HTML, она включается в зону , предназначенную для определений. Здесь можно создавать элементы, которые не появятся сами в SVG, но будут использованы другими элементами.
Перемещение стилей в отдельную зону может сделать проще применение свойств к большим группам элементов. Вы также можете использовать вещи типа псевдоклассов наведения для создания эффектов переворачивания:
Также можно определить отдельный файл стилей для ваших CSS-правил через обычный XML-stylesheet синтаксис:
Подключаем SVG-иконку на сайт и меняем цвет через CSS
HTML, CSS
В предыдущих сериях…
В прошлой статье мы выяснили, в чем отличие растровых форматов изображения от векторных. Теперь будем работать с векторной графикой. Для начала, научимся подключать эти изображения разными способами.
Возьмем стандартную папку с проектом, в которой есть отдельная папка для изображений, отдельная — для файлов .css , а также файл .html
Подключение через тег ![]()
в html
Работаем как с обычной картинкой. Тег , атрибут src , прописываем путь к файлу. Можно использовать любые атрибуты
, включая атрибут width .
Подключение фона в .css
Можно подключить svg-графику в качестве фона элемента. Часто используются фоновые паттерны. Это небольшой фрагмент, впоследствии повторяющийся и создающий орнамент.
Так выглядит наш паттерн:
Укажите в html нужный класс и пропишите свойства фона background-image в файле css. Используйте функцию url() , чтобы задать путь к файлу с изображением.
Вот, что у нас получилось:
Описываем svg-графику inline
Существуют специальные теги и атрибуты для описания графики прямо в коде. При этом, изображение становится интерактивным — мы можем, например, менять цвет, или размер по наведению на иконку.
Тег используется как контейнер для хранения SVG графики. При помощи тега и его атрибутов создается фигура. Посмотрите, как выглядит иконка YouTube в inline формате.