Здравствуйте! Продолжим изучение 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. Надеюсь было интересно.
Что такое SVG