С помощью CSS можно изменять свойства элементов SVG изображений, которые были вставлены на страницу.
Например, допустим, у вас есть SVG изображение, содержащее круг:
<svg width="100" height="100" viewBox="0 0 100 100">
<circle cx="50" cy="50" r="40" fill="blue" />
</svg>
Если вы хотите изменить цвет заполнения (fill) круга на красный с помощью CSS, то вы можете сделать это следующим образом:
circle {
fill: red;
}
Обратите внимание, что CSS-селектор соответствует имени элемента SVG (в данном случае это circle
). Для изменения других свойств, таких как цвет обводки (stroke) или ширина обводки (stroke-width), вы можете использовать соответствующие CSS свойства:
circle {
fill: red;
stroke: green;
stroke-width: 2;
}
Кроме того, вы можете применять различные эффекты к SVG-изображениям с помощью CSS, такие как тени, фильтры и анимации. Например, для добавления тени к кругу на SVG изображении, вы можете использовать следующий CSS-код:
circle {
fill: red;
stroke: green;
stroke-width: 2;
filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.5));
}
Здесь применен фильтр drop-shadow()
, который создает тень с указанными параметрами.
Использование CSS для стилизации элементов SVG/Images даёт возможность гибко управлять и изменять внешний вид SVG-графики на странице.