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

Оцените материал
(0 голосов)

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

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

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

Как стилизовать  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 объектов. Наконец  давайте рассмотрим, как задавать стили одновременно  для многих элементов.

С помощью  специального тега 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. Надеюсь было интересно.

Прочитано 820 раз Последнее изменение Четверг, 27 июля 2017 17:18
Другие материалы в этой категории:
Понравилась запись? Подпишитесь на обновления по почте:

Нетология

TemplateMonster

geekbrains.ru/

Поиск по сайту

Google+