#css #angular #typescript #svg
Вопрос:
В моем приложении Angular 12 я использую изображение svg извне. Мне нужно изменить цвет этого svg с помощью css.
<object type="image/svg xml" data="assets/icons/certificate.svg"></object>
Я попробовал установить как заливка: красный, но это не сработало.
Мне нужно сделать это с помощью css, потому что я тоже настроил свое приложение в темном режиме. В противном случае я мог бы изменить значение заполнения путей в исходном svg-файле.
Комментарии:
1. почему бы не использовать два SVG-файла и не выбрать, какой из них использовать, в зависимости от того, темный это режим или нет. Или, в качестве альтернативы, поместите медиа-запрос для темного режима в файл certificate.svg.
2. Или вы можете установить свойство «заливка» в своем svg — файле на
fill="currentColor"-это позволяет изменять цвет заливки в зависимости от цвета текста (так в CSS:color: redизменил бы заливку на красную).3. Подойдет ли ваш svg для использования в качестве маски — тогда вы могли бы «вырезать» значок на цветном фоне.