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

Question

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

Тип вопроса: CSS Вероятность: 10% Категория: Frontend Разработчик

Ответ

Стилизация 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 (устаревший)

Ответ 18+ 🔞

А, слушай, про стилизацию SVG, ну это вообще отдельная песня, блядь! Ну то есть, смотри, это ж по сути картинка, но её можно как обычную HTML-хрень разукрасить. Только там свои приколы, конечно.

Ну вот, смотри, самый простой способ — прямо в тег хуякнуть атрибуты. Как в старые добрые времена, когда CSS был в проекте, а мы его в рот не брали.

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

Вот, видишь? fill — это заливка, а не background-color, ёпта! stroke — обводка, stroke-width — ну, толщина этой самой обводки. Всё просто, как три копейки.

Но если ты не конченый дикарь, то, наверное, захочешь CSS-классы использовать. Ну и правильно, блядь! Можно прямо внутри SVG в <style> прописать.

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

Вот так уже цивилизованнее, да? А если SVG у тебя прямо в HTML вставлен, то можно из внешнего файла стилей на него воздействовать, ядрёна вошь!

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

И он, сука, будет плавно менять цвет! Красота же!

Но есть нюансы, блядь, овердохуища нюансов! Некоторые штуки, типа градиентов или сложных масок, должны быть описаны внутри самого SVG, в специальных тегах <defs>. Потом на них просто ссылаться. А анимации можно через CSS гонять, как я показал, или через древний SMIL, который уже все забили хуй, потому что он устаревший.

Короче, ничего сложного, главное — запомни, что background-color тут не катит, только fill и stroke. Всё остальное — почти как с обычным дивом, только геометричнее.