Здравствуйте! Продолжим изучение svg и из этой статьи вы узнаете как стилизовать svg с помощью стилей.
Задавать стили для svg, используя css вы можете аналогично, как и для html элементов, но есть небольшие нюансы. Например, для того чтобы задать цвет фона, необходимо использовать такое свойство как fill, а рамка для элемента задаётся с помощью такого свойства как stroke. Все другие свойства можно посмотреть на официальном сайте w3.org.
Самый простой способ задать стили — конечно через атрибуты. Такой способ был уже использован нами в прошлом посте.
<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
Об авторе