Как стилизовать SVG через CSS?
А зачем белый квадрат делать с помощью svg? Вы балуетесь с svg? я уверен, что Вашу задачу можно решить более стандартными методами.
Владимир Новицкий @Novitsky Автор вопроса
Максим Тимофеев: Белый квадрат, это для примера. На самом деле будет фигура посложнее, у которой тоже предстоит менять цвета. Просто с одной строчкой в стилях проще объяснить, что мне нужно.
Владимир Новицкий @Novitsky Автор вопроса
Если получится с квадратом, значит получится и с более сложными фигурами.
Тогда — вставляете SVG, как код и меняйте его через css, подругому никак
Владимир Новицкий @Novitsky Автор вопроса
Максим Тимофеев: Ниже было предложение прописывать стили в самом SVG. Но мне не понятно, как там создавать определенные условия, при которых цвет должен меняться.
Владимир Новицкий @Novitsky Автор вопроса
Может, это тоже невозможно?
Возможно. Там можно прописать стили в том числе и jjjj:hover
Сложность в том, что не понятно что Вы хотите получить. Пример прост, но не видно цели.
Владимир Новицкий @Novitsky Автор вопроса
Максим Тимофеев: hover прописать можно, но мне нужно, чтобы была зависимость от родительского элемента:
Если к родительскому div’у добавить класс black, то и SVG-фон должен стать черным.
Я не знаю, как проще объяснить.
так и пропишите в svg с учетом родительского элемента
Владимир Новицкий @Novitsky Автор вопроса
Максим Тимофеев: Пробовал, не прокатывает. Ниже писал об этом.
Решения вопроса 0
Ответы на вопрос 1
Автор Ботодрома (автоматизация Telegram, VK и др.)
Чтобы применять стили к SVG с помощью CSS, SVG должен быть вставлен как HTML-элемент этого документа. В Вашем случае:
Ответ написан более трёх лет назад
Владимир Новицкий @Novitsky Автор вопроса
Про это уже написали выше. Меня интересует стилизация именно background-image svg.
Владимир Новицкий @Novitsky Автор вопроса
Но, как я понял, это невозможно.
Такой SVG можно только стилизовать через CSS внутри этого SVG.
Владимир Новицкий @Novitsky Автор вопроса
Алексей Кауль: Было бы прекрасно, но как?
.black > .fil ]]>Такая конструкция тоже не помогает. Может, как-то по другому надо?
Владимир Новицкий: покажите весь SVG. Вот рабочий пример со вставленными в SVG стилями:
Владимир Новицкий @Novitsky Автор вопроса
Алексей Кауль: Вот мой SVG:
Владимир Новицкий @Novitsky Автор вопроса
Обычный квадрат, нарисованный в Кореле и оптимизированный с помощью svgo-gui ( https://github.com/svg/svgo-gui ).
Владимир Новицкий: Попробовал прицепить Ваш SVG через background-image. Все отлично работает. Вот HTML код, который использовал.
Владимир Новицкий @Novitsky Автор вопроса
Алексей Кауль: Я не спорю, что он работает. Дело в том, что при определенных событиях, к обертывающему div’у ( в вашем случае body) скриптом добавляется класс. Так вот нужно, что, когда класс добавлен, svg менял цвет.
Вот такая конструкция не работает:
Владимир Новицкий: Увы, такой сценарий невозможно реализовать. SVG, вставляемый через background-image, исполняется в своей песочнице, и полностью оторван от окружающей среды.
Нативный способ покрасить SVG-иконки
Когда вам нужна возможность менять цвет иконок через CSS, что вы делаете? Вариантов не так много.
Обычно используются либо шрифты иконок, либо исходный код SVG скачивается и вставляется в HTML вручную. Шрифт нужно оптимизировать, иначе пользователь загрузит разом все иконки без надобности. Работа с исходным кодом требует тяжелых DOM-операций и потенциально опасна.
Чтобы защититься от вредоносного кода SVG нужно «почистить». Встроенный в Angular санитайзер, к примеру, не работает с SVG и превращает их в пустую строку. Можно воспользоваться проверенным инструментом DOMPurify и подключить его с помощью нашей библиотеки ng-dompurify, о чем я подробно рассказывал.
Давайте посмотрим на еще один способ, доступный в современных браузерах, — тэг USE.
Чем нам полезен USE?
Этот тэг задуман для переиспользования символов и целых SVG-блоков на странице. Но в современных браузерах (прости, IE) он может даже доставать внешние ресурсы!
Внешние SVG должны быть на том же домене, так что CDN не подойдет. Пока.
Это позволяет нативным образом вставить SVG в Shadow DOM, почти как тэг IMG с атрибутом src , только с возможностью использовать CSS. И оно даже само работает с кэшем! Но нужно слегка подготовить иконки. Вот что надо сделать:
Сначала в каждой иконке нужно сделать символ с уникальным id и переместить viewBox в него.
Затем надо назначить fill (или stroke ) на currentColor , чтобы потом использовать CSS-правило color для задания цвета. Можно также задать эти атрибуты в inherit на других элементах, что позволит сделать двухцветные иконки (подробнее — в примере ниже).
Когда наши иконки подготовлены, остается только скинуть их в папку assets и использовать:
Компонент именованных иконок для Angular
Писать путь и обращаться к символу каждый раз утомительно. Давайте сделаем Angular-компонент, который будет находить иконки по имени. С помощью Dependency Injection это сделать очень просто.
Нам понадобится токен для предоставления пути до всех наших иконок и простой компонент. Он будет формировать href исходя из имени и заданного пути. Мы даже можем повесить его на нативный SVG с помощью селектора: так мы вынесем наружу заботу о размере.
Надо иметь в виду, что Safari до 12.1 поддерживает только устаревший синтаксис xlink:href . Так что лучше использовать оба варианта.
Сделаем stroke и fill прозрачными для использования нескольких цветов в CSS:
Заключение
У этого подхода есть ограничения — отсутствие поддержки IE и кросс-доменности. Однако, если они для вас не критичны, данное решение может стать хорошей альтернативой другим способам.
Вам не придется включать иконки в бандл приложения или скачивать их запросами. Вы можете положиться на кэш для ускорения загрузки, а отсутствие DOM-операций делает этот подход быстрее и безопаснее ручной вставки исходников. Всем ярких решений!
- Блог компании TINKOFF
- CSS
- Работа с векторной графикой
- HTML
- Angular
Как изменить фон svg через css
Один из способов вывести картинку в формате «.svg» — это вывод в стандартном теге картинки «img»:
НО! Проблема заключается в том, что стандартными способами управления цветом css — вы это сделать не сможете !
Можно попробовать наложить маски css на svg
И здесь опять НО! Не на все виды «svg» можно накладывать маску!
Изменить цвет в стандартном теге img цвет картинки svg — изменить нельзя!
Попробуем другим способом:
Изменение цвета картинки в теге svg
Наверное самый простой способ изменить цвет svg — это изменение в самом теге svg, для этого вам понадобится:
Svg код картинки:
Выведем его прямо здесь:
Внутрь тега «path» — добавляем цвет fill=»red»
Пример изменения цвета svg .
Выведем выше приведенный код svg с измененным цветом:
Пример №2 изменения цвета svg .
Изменим цвет svg теперь в желтый :
Результат покраски картинки svg в желтый.
Как изменить цвет у svg картинки в теге div
Мы можем изменить цвет «svg» — если обернем наш svg в тег. напримерdiv, для этого вам понадобится:
В тег помещаем все наши стили, с размером и задним фоном(background) который и будет красить наш svg:
width: 70px; height: 70px; display: inline-block; background: #FF0000;
Соберем весь код вместе:
Код изменения цвета svg используя тег div
Результат изменения цвета svg картинки.
Далее возьмем выше приведенный код с изменным цветом svg и разместим его прямо здесь, чтобы увидеть результат:
Как подобрать/изменить цвет svg через исследовать элемент?
Можно изменять и подбирать цвет обычным образом, через исследовать элемент по блоку, справа находим background, нажимаем, выбираем нужный цвет для «svg»
Нажмите, чтобы открыть в новом окне.
Новый цвет svg(пример)
вы подобрали новый цвет для svg, код получился:
Заносим код в стили и получаем svg другого цвета.
Выведем новый svg с новым цветом:
Как сделать hover на svg?
Есть растровая картинка с планом этажа. На ней несколько квартир. На эту растровую картинку я нарисовал векторные области, которые выделяют квартиры. Сохранил в svg всё это. Соответственно получил svg файл с областями нужными и в нём растровую картинку. Как сделать чтобы эти отрисованные ховеры срабатывали при наведении на нужную квартиру?
- Вопрос задан более трёх лет назад
- 8564 просмотра
Комментировать
Решения вопроса 2
Архитектор ПО
Для того, чтобы на вашем векторном канвасе работали все события js и css, вам нужно в разметку вашего документа (страницы) непосредственно внедрить полную разметку вашего svg. Далее вы можете с ним делать что угодно, словно это любой другой DOM-элемент. Доступ к дочерним элементам типа g или path так же сохранится с теми же событиями. Если вы подгрузите в документ свой вектор svg как или в таком духе, ваши события, разумеется, не будут работать, ни в css, ни в js.
Ответ написан более трёх лет назад
Комментировать
Нравится 3 Комментировать
Dima Polos @dimovich85 Куратор тега CSS
https://u-academy.net/
SVG поддерживает добавление классов и id для элементов, и на них можно писать css. Правда свойства и значения свои, например fill, stroke.
Ответ написан более трёх лет назад
Нравится 2 1 комментарий
Dima Polos @dimovich85 Куратор тега CSS
Да, важный момент подметили, надо инлайнить svg, чтобы работали события и селекторы, так как svg инлайн становится частью DOM.