SVG-изображения можно стилизовать с помощью CSS, используя селекторы и свойства, которые применяются к элементам SVG.
Рассмотрим несколько способов изменения SVG-изображения с помощью CSS:
- Изменение цвета SVG-изображения:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path d="M0 0h24v24H0z" fill="none"/>
<path d="M12 5.71l-5 4.86V19h10v-8.43l-5-4.86zM12 3c1.1 0 2.1.45 2.83 1.17l5.66 5.5c.63.61.96 1.42.9 2.28l-.32 5.55-.04.65c-.11 1.62-1.55 2.89-3.18 2.98L12 21l-1.83-.06c-1.63-.09-3.07-1.36-3.18-2.98l-.04-.65-.32-5.55c-.06-.86.27-1.67.9-2.28l5.66-5.5c.73-.71 1.73-1.17 2.83-1.17z"/>
</svg>
<style>
path {
fill: #FF0000;
}
</style>
Мы использовали селектор path
, чтобы выбрать все элементы пути (path) внутри SVG-изображения. Затем, с помощью свойства fill
, мы установили красный цвет (#FF0000
) для всех элементов пути.
- Изменение размера SVG-изображения:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path d="M0 0h24v24H0z" fill="none"/>
<path d="M12 5.71l-5 4.86V19h10v-8.43l-5-4.86zM12 3c1.1 0 2.1.45 2.83 1.17l5.66 5.5c.63.61.96 1.42.9 2.28l-.32 5.55-.04.65c-.11 1.62-1.55 2.89-3.18 2.98L12 21l-1.83-.06c-1.63-.09-3.07-1.36-3.18-2.98l-.04-.65-.32-5.55c-.06-.86.27-1.67.9-2.28l5.66-5.5c.73-.71 1.73-1.17 2.83-1.17z"/>
</svg>
<style>
svg {
width: 100px;
height: 100px;
}
</style>
Мы задали ширину и высоту для всего SVG-изображения, используя селектор svg
и свойства width
и height
.
- Применение эффекта тени к SVG-изображению:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path d="M0 0h24v24H0z" fill="none"/>
<path d="M12 5.71l-5 4.86V19h10v-8.43l-5-4.86zM12 3c1.1 0 2.1.45 2.83 1.17l5.66 5.5c.63.61.96 1.42.9 2.28l-.32 5.55-.04.65c-.11 1.62-1.55 2.89-3.18 2.98L12 21l-1.83-.06c-1.63-.09-3.07-1.36-3.18-2.98l-.04-.65-.32-5.55c-.06-.86.27-1.67.9-2.28l5.66-5.5c.73-.71 1.73-1.17 2.83-1.17z"/>
</svg>
<style>
svg {
filter: drop-shadow(0px 0px 3px rgba(0,0,0,0.8));
}
</style>
Мы использовали свойство filter
и функцию drop-shadow
, чтобы применить эффект тени к SVG-изображению.
Выбор способа изменения SVG-изображения зависит от вашей задачи и нужного эффекта.