Если вы хотите изменить цвет SVG, который выводится через свойство content: url, вам потребуется некоторый дополнительный код.
Основная проблема заключается в том, что когда SVG выводится в качестве фонового изображения через content: url, он рассматривается браузером как часть контента, а не как внутренний элемент, и поэтому применение прямого стиля через CSS не работает.
Однако, есть несколько способов обойти это ограничение.
1. Использование спрайтов SVG. Создайте спрайт SVG, включающий все необходимые варианты цвета для вашего SVG. Затем вы можете использовать background-position или CSS классы, чтобы изменить цвет, устанавливая нужную позицию в спрайте.
2. Использование фильтров CSS. Вы можете применить фильтры CSS к SVG, чтобы изменить его цвет. Например, фильтр filter: hue-rotate(180deg) поворачивает цвета на 180 градусов, создавая эффект изменения цвета.
3. Использование элемента <img> вместо content: url. Вместо content: url вы можете использовать <img src="your-svg-path.svg">. Затем вы можете применить стили к этому элементу, включая изменение цвета через CSS.
4. Использование встроенного <svg> элемента. Вместо использования content: url, вы можете встроить SVG напрямую в код HTML с помощью <svg> элемента. Затем вы сможете применить стили к этому элементу, включая изменение цвета.
Конкретный метод, который следует использовать, будет зависеть от ваших потребностей и ограничений вашего проекта. Некоторые из этих методов требуют дополнительной подготовки файла SVG или поддержки определенных свойств CSS, поэтому выбор зависит от контекста и целей вашего проекта.