Как изменить цвет svg в CSS

Вы можете изменить цвет SVG изображения в CSS, используя свойство «fill» или «stroke» (для контуров).

1. Изменение цвета заливки (fill):

Для изменения цвета заливки в CSS используйте свойство «fill» и задайте новое значение цвета.

HTML код:

<svg width="100" height="100">
  <rect x="10" y="10" width="80" height="80" fill="#000000"/>
</svg>

CSS код:

rect {
  fill: red;
}

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

2. Изменение цвета контура (stroke):

Для изменения цвета контура в CSS используйте свойство «stroke» и задайте новое значение цвета.

HTML код:

<svg width="100" height="100">
  <rect x="10" y="10" width="80" height="80" stroke="#000000" stroke-width="2"/>
</svg>

CSS код:

rect {
  stroke: red;
}

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

3. Изменение цвета SVG изображения с помощью фильтров:

Вы также можете изменить цвет SVG изображения с помощью CSS фильтров, таких как «hue-rotate», «brightness», «contrast» и других. Например, следующий код изменит цвет изображения на синий:

CSS код:

img {
  filter: hue-rotate(180deg);
}

Надеемся, что это поможет вам изменить цвет SVG элементов на вашей веб-странице.