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

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

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

Отслеживать
задан 29 янв в 17:57
Может эти ответы тебе помогут. stackoverflow.com/questions/22252472/…
29 янв в 17:59

Просто перетащите сам контент SVG ( ) в HTML документ вместо изображения ( ).

29 янв в 18:20
в img вы не сможете поменять fill
30 янв в 1:47

2 ответа 2

Сортировка: Сброс на вариант по умолчанию

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

Отслеживать
ответ дан 30 янв в 7:21
Евгений Ли Евгений Ли
1,378 1 1 золотой знак 1 1 серебряный знак 9 9 бронзовых знаков

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

Отслеживать
ответ дан 2 фев в 20:28
1 3 3 бронзовых знака

• css
• reactjs
• svg
• typescript
• nextjs

Важное на Мете

Похожие

Подписаться на ленту

Лента вопроса

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

Дизайн сайта / логотип © 2023 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2023.11.15.1019

Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.

Изменить цвет svg path

Есть такая разноцветная svg с 4 path, у каждого path свой цвет скрин Нужно на ховер задать всем path одинаковый цвет, к примеру белый.

Отслеживать
задан 30 июл 2018 в 21:01
Илья Шишлачев Илья Шишлачев
1,393 7 7 серебряных знаков 14 14 бронзовых знаков
Как вариант, можно менять background-image: url(путь к файлу), при ховере сделать белой
1 авг 2018 в 14:38
да, так можно, еще можно накладывать сверху блок с белой иконкой, в принципе одно и тоже)
1 авг 2018 в 21:07
Возможный дубликат вопроса: изменение цвета svg при наведении
– user256824
29 июл 2019 в 2:31

3 ответа 3

Сортировка: Сброс на вариант по умолчанию

Чтобы было видно белый цвет, я сделал фон самого svg серым, в общем смотрите.

Отслеживать
109k 23 23 золотых знака 112 112 серебряных знаков 374 374 бронзовых знака
ответ дан 26 июл 2019 в 5:29
Резидент Казахстана Резидент Казахстана
13.5k 2 2 золотых знака 19 19 серебряных знаков 61 61 бронзовый знак

svg &:hover fill:#fff 

svg path &:hover fill:#fff 

можешь попробовать добавить !important

Отслеживать
ответ дан 30 июл 2018 в 23:58
107 1 1 серебряный знак 7 7 бронзовых знаков

В path, в параметре fill, надо указать цвет, который Вам надо.

Отслеживать
ответ дан 22 апр 2022 в 4:18
Профессиональный Аноним Профессиональный Аноним

• html
• css
• css3
• html5

Важное на Мете

Связанные

Похожие

Подписаться на ленту

Лента вопроса

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

Дизайн сайта / логотип © 2023 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2023.11.15.1019

Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.

Как поменять цвет иконки svg в css

В этой статье рассмотрим несколько примеров, как задать цвет любому изображению в формате svg с использованием css-стилей.

Основы

Изображение svg можно вставить кодом прямо в файл html — это будет инлайновый вариант:

А можно вставить через тег img:

Если заглянуть «под капот» и изучить код, который отвечает за отрисовку SVG, то можно выделить два свойства, которые отвечают за цвет — fill (заливка) и stroke (обводка). Их можно редактировать и тем самым менять цвет иконки.

Меняем цвет с помощью свойства fill

Смотрите, у нас два квадрата — они идентичны, за исключением свойства fill. В одном случае мы залили квадрат красным цветом, в другом вообще не прописали этой свойство.

Изменяем цвет с помощью инлайновых стилей

Мы можем прямо в файле svg прописать стили — с помощью :

Внутри тега svg мы вставили обычные инлайновые стили. Обратите внимание, здесь мы обращаемся к тегу rect, но мы легко можем добавить класс нашему квадрату и обращаться к нему через класс:

Так же, с помощью инлайновых стилей можем менять цвет svg при наведении. Это должно быть вам знакомо.

Изменить цвет svg

Я хочу использовать эту технику http://css-tricks.com/svg-fallbacks/ и изменить цвет SVG, но до сих пор я не смог этого сделать. Я положил это в CSS, но мое изображение всегда черное, несмотря ни на что. Мой код:

ОТВЕТЫ

Ответ 1

Вы не можете изменить цвет изображения таким образом. Если вы загрузите SVG как изображение, вы не сможете изменить способ его отображения с помощью CSS или Javascript в браузере.

Если вы хотите изменить изображение SVG, вы должны загрузить его, используя , или inline.

Если вы хотите использовать методы на странице, вам нужна библиотека Modernizr, где вы можете проверить поддержку SVG и условно отобразить или не использовать запасное изображение. Затем вы можете встроить SVG и применить нужные вам стили.

Ответ 2

Чтобы изменить цвет любого SVG, вы можете напрямую изменить код svg , открыв файл svg в любом текстовом редакторе. Код может выглядеть следующим образом:

Вы можете заметить, что есть некоторые теги XML, такие как путь, круг, многоугольник и т.д.. Там вы можете добавить свой собственный цвет с помощью атрибута style. Посмотрите на приведенный ниже пример

Добавьте атрибут стиля ко всем тегам, чтобы вы могли получить свой SVG требуемого цвета

Ответ 3

Ответ 2019

Чтобы изменить любой цвет SVG

1. Добавьте изображение SVG с помощью тега .

1. Чтобы выполнить фильтрацию по определенному цвету, используйте следующий Codepen (Нажмите здесь, чтобы открыть codepen), чтобы преобразовать шестнадцатеричный цветовой код в фильтр CSS:

Например, для #00EE00 выводом является

1. Добавьте CSS filter в этот класс.

Ответ 4

Добавлена тестовая страница — раскрасить SVG через настройки фильтра:

EG filter: invert(0.5) sepia(1) saturate(5) hue-rotate(175deg)

Ответ 5

Только SVG с информацией о пути. Вы не можете сделать это с изображением. как путь вы можете изменить штрих и заполнить информацию, и все готово. как иллюстратор

Итак: с помощью CSS вы можете перезаписать значение fill пути

но если вы хотите более гибкий способ, как вы хотите изменить его с текстом, когда есть какой-то эффект зависания.. используйте

Ответ 6

Самый простой способ — создать шрифт из SVG, используя такой сервис, как https://icomoon.io/app/#/select или подобный. загрузите SVG, нажмите «создать шрифт», включите файлы шрифтов и CSS на свою сторону и просто используйте и стилизуйте его, как любой другой текст. Я всегда так использую, потому что это делает стиль намного проще.

РЕДАКТИРОВАТЬ: Как упомянуто в статье, прокомментированной @CodeMouse92, иконочные шрифты портят программы чтения с экрана (и, возможно, вредны для SEO). Так что скорее придерживайтесь SVG.

Ответ 7

Вы можете изменить раскраску SVG с помощью css, если вы используете некоторые трюки. Для этого я написал небольшой script.

• просмотрите список элементов, которые имеют изображение svg
• загрузить файл svg как xml
• выбор только svg part
• изменить цвет пути
• замените src на модифицированный svg как встроенное изображение

приведенный выше код может работать некорректно, я реализовал его для элементов с фоновым изображением svg, который работает почти так же. Но в любом случае вам нужно изменить этот script, чтобы он соответствовал вашему делу. надеюсь, что это помогло.

Ответ 8

Чтобы просто изменить цвет svg:

Перейдите в файл svg и в разделе стилей укажите цвет заливки.

Ответ 9

Целевой путь в SVG:

Вы можете сделать inline, например:

Ответ 10

Если вы хотите сделать это для встроенного SVG, который, например, фоновое изображение в вашем CSS:

Создаём и используем символьный SVG-спрайт

SVG — масштабируемая векторная графика.

Сама по себе технология SVG — это очень объёмная тема — подробнее с ней можно познакомится на MDN Web Docs

В данной статье мы будем использовать иконки созданные по технологии SVG. Их отличие в том, что при изменении размеров они не теряют качества отображения, при этом весят обычно меньше, чем аналогичная иконка в другом формате, например PNG

Аналогичные иконки при масштабировании в формате SVG и PNG

Способы использования SVG-иконок

SVG-иконки можно использовать несколькими способами

1й способ — сохранить SVG-иконку как файл, и подключать как обычное изображение

При таком способе подключения, SVG-иконка будет масштабироваться без потери качества, но нельзя будет задать цвет иконки через CSS, и следовательно не получится плавно менять цвет иконки при наведении. И если в другом месте нужно будет использовать эту же иконку в другом цвете, необходимо будет создавать дополнительный файл SVG иконки

2й способ — открыть файл SVG-иконки в текстовом редакторе, скопировать код иконки и вставить его в необходимую часть HTML.

Если использовать SVG-иконку таким способом, можно будет задать цвет иконки через CSS, и получится сделать плавное изменение цвета при наведении. Но если придется использовать эту же иконку в другом месте, то это будет дополнительная нагрузка на браузер, так как иконка будет отрисовываться заново при каждом использовании

3й способ — самый оптимальный способ использовать SVG-иконки — сделать символьный SVG-спрайт. При таком способе каждая иконка отрисовывается всего один раз в скрытом блоке, а затем может быть использована неограниченное количество раз, ссылаясь на уже отрисованную иконку. При этом, одной и той же иконке в разных местах можно задавать свой цвет через CSS, следовательно не нужно дублировать иконку и можно делать плавное изменение цвета при наведении.

Этот способ и рассмотрим подробнее

Создаём и используем символьный SVG-спрайт

Символьный SVG-спрайт — это просто коллекция символьных SVG-иконок, собранных в одном, обычно скрытом, специальном блоке

Для примера скачаем пару SVG-иконок, например, на сайте https://uxwing.com/ с бесплатными иконками

Чтобы автоматически создать SVG-спрайт, воспользуемся онлайн-сервисом https://svgsprit.es/

Просто перетаскиваем все необходимые файлы SVG-иконок на главную страницу https://svgsprit.es/, и внизу страницы автоматически будет сгенерирован код, состоящий из двух частей

Первая часть — символьный SVG спрайт

Вторая часть — код использования

Создадим HTML разметку, в которую добавим сгенерированный символьный SVG-спрайт и сразу используем иконки в необходимых местах

Добавим стили

Прежде чем задавать цвет иконки в CSS, необходимо убедиться, что у кода иконки в SVG-спрайте отсутствуют свойства fill и stroke . Если эти свойства присутсвуют в коде иконки, то необходимо их удалить, так как приоритет CSS свойств будет ниже, чем у inline-стилей, и значения, указанные в CSS будут игнорироваться

Чтобы через CSS задать цвет для SVG-иконки, используем свойства fill и stroke

fill — заливка иконки

stroke — цвет обводки

Если иконка состоит только из обводки, то чаще всего для свойства fill необходимо указать значение transparent , чтобы у иконки не было чёрной заливки по-умолчанию

Получаем следующий результат

Итоги

Использование SVG-иконок имеет несколько преимуществ — возможность масштабирования без потери качества, плавное изменение цвета, меньший вес, нет необходимости дублировать иконки, если они отличаются по цвету, размеру.

В статье рассмотрели как быстро и просто создать символьный SVG-спрайт и оптимально использовать SVG-иконки

Как работать с форматом SVG: руководство для начинающих веб-разработчиков

Файлы в формате SVG «лёгкие» и масштабируемые, а также их можно модифицировать через код. Они обеспечивают высокое качество изображений независимо от размера экрана. С ними можно работать как с обычными изображениями, а также использовать инлайн в HTML. Подробнее о преимуществах формата в статье.

Зачем использовать SVG

Если вам нужны чёткие, адаптивные или анимированные элементы интерфейса, иконки, логотипы, векторные изображения, стоит подумать об использовании формата SVG. Ниже перечислены его основные возможности и преимущества.

Масштабирование изображения с сохранением качества pixel perfect

При использовании формата PNG или растровых изображений разработчики ограничены пикселями. Масштабирование картинки снижает её качество. Поэтому приходится использовать несколько разных фото для девайсов с разным разрешением экрана.

Изображения в формате SVG сохраняют качество при масштабировании, так как они нарисованы с помощью кода, а не с помощью пикселей.

Сравнение качества растровых и векторных изображений

Возможность модификации

Изображения в формате SVG можно анимировать или стилизовать с помощью CSS. Вы можете изменить цвета, размеры элементов, шрифты и так далее. Элементы векторных изображений можно делать адаптивными.

Небольшой «вес» файлов

Изображения в формате PNG становятся очень «тяжёлыми», когда вы используете высокое разрешение. Это негативно влияет на скорость загрузки страницы, что в свою очередь может ухудшить результаты сайта в поисковой выдаче.

Файлы в формате JPG чуть «легче» картинок в PNG, но всё равно они слишком «тяжёлые». А изображения SVG представляют собой код, поэтому они «весят» очень мало. Поэтому смело используйте этот формат для создания иконок, логотипов и других элементов интерфейса.

Доступность

Если SVG-изображения содержат текст, поисковики могут их индексировать и выдавать в ответ на запросы пользователей. Скринридеры, которые используют слабовидящие и слепые пользователи, тоже поддерживают SVG. Это обеспечивает доступность файлов этого формата для всех посетителей сайта.

Использование SVG: распространённые практики

Векторные изображения долго были непопулярными, так как не все браузеры их поддерживали. В настоящее время эта проблема решена. Поэтому формат активно применяется для решения задач веб-разработки. Наиболее популярные кейсы использования представлены ниже.

Логотипы и иконки в SVG

Логотипы и иконки должны сохранять качество на экранах с любым разрешением. Чёткость нужна всем элементам интерфейса сайта: от маленькой кнопки до экранной заставки.

Использование SVG обеспечивает разработчикам контроль над каждой линией, формой и элементом изображения. Также формат облегчает позиционирование элемента и позволяет манипулировать его элементами.

Инфографика

Элементы SVG можно динамически обновлять в зависимости от действий пользователей или изменений данных. Поэтому SVG — идеальный вариант для создания интерактивных карт и инфографики.

Визуальные эффекты

С помощью SVG удобно делать разные визуальные эффекты, например, изменения формы элемента или превращение одного элемента в другой. К примеру, можно менять форму букв или трансформировать один логотип в другой.

Анимация

SVG можно использовать для создания CSS-анимации, поэтому фронтенд-разработчикам не придётся изучать дополнительные техники. Также можно воспользоваться SMIL SVG — инструментом анимации векторных изображений. SMIL обеспечивает разработчикам даже больше возможностей, чем обычная CSS-анимация.

Иллюстрации и рисунки

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

Интерфейсы и приложения

SVG используются для создания сложных интерфейсов, которые интегрируются с насыщенными интернет-приложениями (RIA, rich internet application). Благодаря свойствам формата элементы интерфейса получаются лёгкими, при необходимости анимированными и привлекательными.

Далее речь пойдёт о том, как правильно добавлять файлы SVG на сайт.

Изучайте вёрстку на Хекслете В рамках профессии «Верстальщик» вы изучите HTML5 и CSS3, научитесь пользоваться Flex, Grid, Sass, Bootstrap. В процессе обучения сверстаете несколько полноценных лендингов и добавите их в портфолио. Базовые курсы в профессии доступны бесплатно.

Использование SVG в HTML и CSS

Файлы в формате SVG можно добавлять на страницы сайта средствами HTML и CSS.

Тег img

Первый способ — URL изображения можно указать в атрибуте src тега img. В этом случае вы работает с форматом так же, как с картинками jpg, png и так далее.

Это привычный для большинства разработчиков способ работы с изображениями. Одно из преимуществ — возможность дополнительно использовать тег . С его помощью к изображению можно добавить гиперссылку.

Если вы добавляете изображение через тег img, его можно стилизовать с помощью CSS. Но вы не можете манипулировать элементами изображения с помощью JavaScript и внешних стилей. При этом можно использовать CSS инлайн для изменения кода SVG.

Использование SVG в CSS

Изображения в формате SVG можно указывать в свойстве background-image, как фото в других форматах. Ниже пример кода.

Этот способ сохраняет все преимущества векторных изображений, включая высокую четкость на экранах с любым разрешением. Также этот способ позволяет масштабировать, повторять и позиционировать изображения.

Инлайн SVG в HTML

Файл SVG можно открыть в любом текстовом редакторе, скопировать код и добавить его в HTML-разметку страницы. Это называется использованием SVG инлайн. Пример ниже.

Такой подход уменьшает количество http-запросов и сокращает время загрузки страницы. В тегах можно указывать классы и id и использовать их для изменения стилей элемента с помощью CSS.

Использование SVG в формате кода

В SVG-файлах используется основанный на XML язык, который описывает векторные изображения. Как и HTML, это язык разметки. Но код SVG позволяет манипулировать элементами, например, применять к ним эффекты.

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

Подробнее о работе с простыми фигурами ниже.

Рисуем с помощью SVG: круг

Чтобы нарисовать круг, необходимо указать три атрибута:

• Радиус круга — r.
• Позицию центра круга по оси x — cx.
• Позицию центра круга по оси y — cy.

Код, с помощью которого можно нарисовать круг, можно посмотреть ниже. Цвет линии и фона можно указывать инлайн или отдельно.

Круг нарисован с использованием обсуждаемого формата

Рисуем с помощью SVG: прямоугольник

Создание прямоугольников с помощью SVG похоже на рисование окружностей. Достаточно указать координаты центра по осям x и y, а также высоту и ширину для определения размера. Пример кода ниже.

Прямоугольник нарисован с помощью SVG

Рисуем с помощью SVG: линия

Чтобы нарисовать линию, нужно указать координаты по осям x и y двух точек. Также можно указать цвет и толщину линии. Код ниже наверняка выглядит понятнее объяснения словами.

Рисуем с помощью SVG: звезда

С помощью SVG можно рисовать звёзды и другие многоугольники. Для этого достаточно указать координаты точек углов фигуры. Пример кода ниже.

Сложный многоугольник в формате SVG

Рисуем с помощью SVG: пути

С помощью элемента можно рисовать ломаные кривые. Они позволяют создавать объекты разной формы. С помощью атрибута d определяется путь или координаты ломаной линии. Команда M используется для абсолютного позиционирования, а m — для относительного. С помощью команды L определяются координаты новой точки.

Вот пример использования path:

А это пример нескольких линий, созданных с помощью path:

Пути (path) в SVG

Рисуем с помощью SVG: кривые

Для рисования кривой линии используется команда C. В примере ниже определяются начало кривой, точки смещения и конец кривой.

С помощью команды S можно объединять кривые и создавать сложные формы.

Читайте также Когда роботы заменят верстальщиков на рынке труда: большая обзорная статья о профессии с комментариями экспертов.

Как работать с текстом с помощью SVG

Формат SVG позволяет работать с текстом. Для этого применяется тег Пример ниже.

Обычный текст создан с помощью SVG

С помощью свойства stroke можно задать цвет шрифта. Позиция текста на странице определяется координатами x и y. В свойствах stroke и fill можно использовать градиенты.

Как управлять свойствами шрифта с помощью svg

SVG позволяет управлять следующими свойствами шрифта:

• font-family .
• font-style .
• font-weight .
• font-variant .
• font-stretch .
• font-size .
• font-size-adjust .
• kerning .
• letter-spacing .
• word-spacing .
• text-decoration .

С помощью тега можно выбрать одно или несколько слов в тексте и изменить их свойства.

Также SVG позволяет переворачивать текст, менять цвет линии и заполнения букв и выполнять другие трансформации. Ниже пример создания контура текста, написанного справа налево. Последнее определено с помощью свойств direction и unicode-bidi.

С помощью можно связывать текст с путями. Это делается с помощью атрибута xlink:href. Пример кода ниже.

Как использовать CSS в SVG

Код CSS можно указывать инлайн в коде SVG. Смотрите пример.

Также можно писать CSS в отдельных файлах и применять стили к элементам SVG. Например, в SVG можно указать класс.

В CSS можно работать с этим классом.

Вместо заключения: как дела с SVG 2.0

SVG 2.0 активно разрабатывается. Продукт находится в стадии предварительной версии (Candidate Recommendation). Браузеры не полностью поддерживают SVG 2.0. В новой версии добавлены некоторые возможности HTML 5 и WOFF (web open font format). Следить за стадиями разработки SVG 2.0 можно на сайте W3C.

Адаптированный перевод статьи All you need to know about SVG on the web by Richard Mattka. Мнение автора оригинальной публикации может не совпадать с мнением администрации «Хекслета».

Никогда не останавливайтесь: В программировании говорят, что нужно постоянно учиться даже для того, чтобы просто находиться на месте. Развивайтесь с нами — на Хекслете есть сотни курсов по разработке на разных языках и технологиях

Похожие публикации:

1. Как настроить arduino ide
2. Как обновить node js
3. Куда закидывать спрей в css v34
4. Почему браузер сам меняет css

Цвет SVG background-image

Есть SVG катинка, в которой для path задан цвет (fill). Эта картинка используется в качестве фона (background-image) для div. Задача сделать темизацию таким образом, чтобы в зависимости от темы fill менялся. Как грамотно, правильно и без костылей это сделать? Был бы благодарен рабочим примерам.

const toggleTheme = () => < const block = document.querySelector(".block"); block.classList.toggle("block_theme_light"); block.classList.toggle("block_theme_dark"); >;

html, body < margin: 0; padding: 0; width: 100%; height: 100%; >.block < width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; background-image: url("data:image/svg+xml,"); background-repeat: repeat; > .block_theme_light < background-color: red; fill: blue; /* Не работает */ >.block_theme_dark < background-color: blue; fill: red; /* Не работает */ >

 
Toggle theme 

Мне нужен способ динамически менять цвет сердечек на фоне при смене темы без второго svg ресурса.
Отслеживать
задан 5 апр 2022 в 21:23
357 1 1 серебряный знак 21 21 бронзовый знак
Извиняюсь за глупый вопрос, но почему не вставить код картинки в html?
5 апр 2022 в 22:20

Дело в том, что это должна быть не картинка, а бэкграунд-паттерн (background-repeat: repeat). Может конечно есть способ каким-то образом замостить картинку и растянуть её на заданную площадь. Очень не хотелось бы городить огороды с двумя картинками, отлчающимися значением fill.

5 апр 2022 в 22:54
Посмотреть бы как-нибудь на это
5 апр 2022 в 23:09
Добавил код в вопрос
6 апр 2022 в 12:55

3 ответа 3

Сортировка: Сброс на вариант по умолчанию

Как вариант, вы можете задать несколько разных «тем» для одного элемента в SVG, вывести их например через и задать им id , а дальше при помощи :target менять их отображение:

.theme .theme:target

После чего сохраним эту картинку на сервере и будем добавлять её в CSS, при этом в ссылке вы можете указывать хеш и use с соответствующим хешу идом, будет отображаться.

body.theme-red .div < background-image: url('my-svg.svg#red') >body.theme-blue .div < background-image: url('my-svg.svg#blue') >body.theme-green .div

Я не смог воспроизвести эту механику взаимодействия с svg ни локально в html файле, ни на dev сервере. Могу предположить, что это подобно iframe работает только по https.

Скорее всего вы просто не правильно что-то сделали.

Вот демо с рабочим кодом. Работает даже если открывать SVG локально в браузере.

.coin < display: inline-block; width: 64px; height: 64px; margin-right: 5px; background-repeat: no-repeat; background-size: contain; >.coin.gold < background-image: url('//minov.pw/for-SO/coin-svgrepo-com.svg#gold'); >.coin.silver < background-image: url('//minov.pw/for-SO/coin-svgrepo-com.svg#silver'); >.coin.bronze < background-image: url('//minov.pw/for-SO/coin-svgrepo-com.svg#bronze'); >

Использование в IMG
      
Использование через background-image
 

А вот код самого SVG ( coin-svgrepo-com.svg )

Вся «магия» благодаря псевдоклассу :target