Как изменить фон svg через css
Перейти к содержимому

Как изменить фон svg через css

  • автор:

Как стилизовать SVG через CSS?

Lynn

А зачем белый квадрат делать с помощью svg? Вы балуетесь с svg? я уверен, что Вашу задачу можно решить более стандартными методами.

Novitsky

Владимир Новицкий @Novitsky Автор вопроса

Максим Тимофеев: Белый квадрат, это для примера. На самом деле будет фигура посложнее, у которой тоже предстоит менять цвета. Просто с одной строчкой в стилях проще объяснить, что мне нужно.

Novitsky

Владимир Новицкий @Novitsky Автор вопроса
Если получится с квадратом, значит получится и с более сложными фигурами.

webinar

Тогда — вставляете SVG, как код и меняйте его через css, подругому никак

Novitsky

Владимир Новицкий @Novitsky Автор вопроса

Максим Тимофеев: Ниже было предложение прописывать стили в самом SVG. Но мне не понятно, как там создавать определенные условия, при которых цвет должен меняться.

Novitsky

Владимир Новицкий @Novitsky Автор вопроса
Может, это тоже невозможно?

webinar

Возможно. Там можно прописать стили в том числе и jjjj:hover

webinar

Сложность в том, что не понятно что Вы хотите получить. Пример прост, но не видно цели.

Novitsky

Владимир Новицкий @Novitsky Автор вопроса

Максим Тимофеев: hover прописать можно, но мне нужно, чтобы была зависимость от родительского элемента:

Если к родительскому div’у добавить класс black, то и SVG-фон должен стать черным.
Я не знаю, как проще объяснить.

webinar

так и пропишите в svg с учетом родительского элемента

Novitsky

Владимир Новицкий @Novitsky Автор вопроса
Максим Тимофеев: Пробовал, не прокатывает. Ниже писал об этом.
Решения вопроса 0
Ответы на вопрос 1

alexk111

Автор Ботодрома (автоматизация Telegram, VK и др.)

Чтобы применять стили к SVG с помощью CSS, SVG должен быть вставлен как HTML-элемент этого документа. В Вашем случае:

Ответ написан более трёх лет назад

Novitsky

Владимир Новицкий @Novitsky Автор вопроса
Про это уже написали выше. Меня интересует стилизация именно background-image svg.

Novitsky

Владимир Новицкий @Novitsky Автор вопроса
Но, как я понял, это невозможно.

alexk111

Такой SVG можно только стилизовать через CSS внутри этого SVG.

Novitsky

Владимир Новицкий @Novitsky Автор вопроса
Алексей Кауль: Было бы прекрасно, но как?

 .black > .fil ]]>Такая конструкция тоже не помогает. Может, как-то по другому надо?

alexk111

Владимир Новицкий: покажите весь SVG. Вот рабочий пример со вставленными в SVG стилями:

Novitsky

Владимир Новицкий @Novitsky Автор вопроса
Алексей Кауль: Вот мой SVG:

Novitsky

Владимир Новицкий @Novitsky Автор вопроса

Обычный квадрат, нарисованный в Кореле и оптимизированный с помощью svgo-gui ( https://github.com/svg/svgo-gui ).

alexk111

Владимир Новицкий: Попробовал прицепить Ваш SVG через background-image. Все отлично работает. Вот HTML код, который использовал.

Novitsky

Владимир Новицкий @Novitsky Автор вопроса

Алексей Кауль: Я не спорю, что он работает. Дело в том, что при определенных событиях, к обертывающему div’у ( в вашем случае body) скриптом добавляется класс. Так вот нужно, что, когда класс добавлен, svg менял цвет.
Вот такая конструкция не работает: