Как задать стили для SVG

Здравствуйте! Продолжим изучение svg и из этой статьи вы узнаете как стилизовать svg с помощью стилей.

Задавать стили для svg, используя css вы можете аналогично, как и для html элементов, но есть небольшие нюансы. Например, для того чтобы задать цвет фона, необходимо использовать такое свойство как fill, а рамка для элемента задаётся с помощью такого свойства как stroke. Все другие свойства можно посмотреть на официальном сайте w3.org.

Как стилизовать SVG

Самый простой способ задать стили — конечно через атрибуты. Такой способ был уже использован нами в прошлом посте.

<svg>
  <rect width="300" height="300" fill="#444" stroke="#333" stroke-width="5">
</svg>

Т.о. надо просто писать имя атрибута-свойства а его значение через знак «=».

Следующий способ определения стилей это непосредственное использование style.

<svg>
  <rect width="300" height="300" style="fill: #678; stroke: #333">
</svg>

Просто пишете style и внутри этого атрибута задавайте его свойства. Свойства надо задавать вот в формате: свойство: значение;

Следующий способ — это когда атрибут style размещается непосредственно в теге head.

<head>
<style>
  <![CDATA[
   rect {
    fill: #ccc;
    stroke: #000;
    stroke-width: 1;
   }
   rect:hover {
    stroke: #0f0;
    fill: yellow;
   }
  ]]>
</style>
</head>
<body>
  <svg>
   <rect x="20" y="20" width="250" height="250">
  </svg>
</body>

В посте что такое svg я уже писал , что SVG основан на XML и, поэтому, стили обязательно должны быть в секции CDATA.

И наконец последний способ — это вынести все стили во внешний файл.

Тут совсем все просто. Просто все стили пишем в отдельном .css файле и подключаем его в теге head. Вот таким макаром:

<link rel="stylesheet" href="style.css">

Вот и в принципе и все основные способы, с помощью которых можно задать стили для SVG объектов. Наконец давайте рассмотрим, как задавать стили одновременно для многих элементов.

Читайте также Как создать анимацию SVG

С помощью специального тега g можно объединять группу элементов и к любому из этих элементов будут применяться стили, которые заданные в теге g.

<svg>
  <g style="fill: #000; stroke: #fff; stroke-width: 5">
   <circle cx="60" cy="50" r="20" />
   <rect width="150" height="150" x="20" y="40" />
  </g>
</svg>

Вот и собственно всё. Сегодня мы с вами выяснили, как задать стили для SVG объектов через css. Надеюсь было интересно.
Ну а в заключении посмотрите видео о том как задать стили для svg