Как интегрировать SVG в CSS и использовать стили для управления его внешним видом?
Этот вопрос проверяет знания как стилизация через CSS может влиять на внешний вид SVG-графики.
Короткий ответ
SVG можно встраивать непосредственно в HTML-код или использовать как фоновое изображение в CSS. Встроенные SVG поддерживают стилизацию через обычные CSS-свойства, такие как fill и stroke, что позволяет легко менять их цвет и прозрачность.
Длинный ответ
SVG можно использовать в CSS несколькими способами:
Фоновое изображение: Добавляется с помощью background-image в CSS. Например:
.icon {
background-image: url('icon.svg');
}Встраивание в HTML: Вставляется непосредственно в HTML и стилизуется через CSS. Например:
<svg class="icon" xmlns="http://www.w3.org/2000/svg">
<circle cx="50" cy="50" r="40" fill="red" />
</svg>Здесь класс .icon может управлять стилем SVG через CSS:
.icon circle {
fill: blue;
}
Использование CSS-свойств: Свойства fill, stroke, opacity, а также трансформации могут применяться к элементам внутри SVG, управляя их внешним видом и поведением.