Как задать стили для 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 объектов. Наконец давайте рассмотрим, как задавать стили одновременно для многих элементов.
С помощью специального тега 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. Надеюсь было интересно.
Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.
admin administrator
Об авторе