Как перекрасить svg в CSS

Есть несколько способов перекрасить SVG с помощью CSS. Вот два наиболее распространенных способа:

  1. С помощью fill

Свойство fill определяет цвет заливки для фигур внутри SVG. Чтобы задать новый цвет заполнения, просто добавьте свойство fill в ваш стиль CSS и установите желаемый цвет:

svg {
  fill: red;
}
  1. С помощью CSS класса и fill

Для более гибкого управления цветом заполнения можно использовать CSS классы. Вот пример класса CSS, который используется для изменения цвета заполнения SVG:

.fill-red {
  fill: red;
}

Чтобы этот класс работал, нужно добавить его к вашему SVG-коду:

<svg class="fill-red" ...>
  ...
</svg>

Теперь SVG будет иметь красный цвет заполнения.

Обратите внимание, что цвет заливки не будет работать для SVG, нарисованных только обводкой. В таком случае следует использовать свойство stroke, чтобы изменить цвет обводки.

реклама

Качественный хостинг сайтов

реклама

Получите консультацию нашего маркетолога

Изучит ваш проект, подберет подходящие услуги и тарифы

Получите бесплатный аудит

Наш специалист сделает базовый аудит вашего проекта и предложит персональные предложения.

Закажите услугу Как перекрасить svg в CSS

Наш специалист свяжется с вами в ближайшее время и уточнит детали