Здравствуйте! Продолжаем изучать svg и сегодня мы узнаем, как стилизовать svg объекты с помощью CSS.
Первый способ задания стилей - через атрибуты. Этот подход мы уже использовали в предыдущей статье.
<svg>
<rect width="200" height="200" fill="#ccc" stroke="#000" stroke-width="1">
</svg>
Т.е. мы просто пишем название атрибута-свойства и через равно его значение.
Второй способ задания стилей - через атрибут style.
<svg>
<rect width="200" height="200" style="fill: #ccc; stroke: #000">
</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="10" y="10" width="100" height="100">
</svg>
</body>
В статье что такое svg я писал , что SVG основан на XML и, следовательно, стили должны быть в секции CDATA.
Четвёртый способ задания стилей - вынести все стили в отдельный файл.
Ничего необычного. Просто вынесите все стили в отдельный .css файл и подключите его в теге head
<link rel="stylesheet" href="/style.css">
Вот и все способы задания стилей для SVG объектов. Напоследок, давайте рассмотрим, как задавать общие стили для нескольких элементов.
С помощью тега g можно объединить несколько элементов и к каждому из них будут применены стили, заданные в теге g.
<svg>
<g style="fill: #ccc; stroke: #000; stroke-width: 1"> <circle cx="40" cy="40" r="30" /> <rect width="50" height="50" x="50" y="30" /> </g>
</svg>
Вот и всё. Сегодня мы разобрались, как стилизовать SVG объекты через css.
Что такое SVG
