< H / $ > Хак/Собесов

Вернуться к списку вопросов

Что такое стилизация svg

Тип вопроса: CSS Вероятность: 10% Категория: Frontend Developer

Ответ

Стилизация SVG позволяет управлять внешним видом элементов через CSS, как и с обычными HTML-элементами. SVG можно стилизовать несколькими способами:

Атрибуты внутри SVG (inline-стили):

<circle cx="50" cy="50" r="40" fill="red" stroke="black" stroke-width="3"/>

CSS-классы (внутри <style> или внешнего файла):

<style>
  .my-circle {
    fill: blue;
    stroke: #fff;
  }
</style>
<circle class="my-circle" cx="50" cy="50" r="40"/>

Внешний CSS (если SVG встроен в HTML):

svg circle {
  fill: green;
  transition: fill 0.3s;
}

Особенности:

Вместо background-color используется fill
stroke отвечает за обводку, stroke-width - её толщину
Некоторые свойства (например, градиенты) должны быть определены внутри SVG
Анимации работают через CSS или SMIL (устаревший)