Что такое SVG? Стилизуем объекты.
Продолжаем изучать векторную графику и сегодня мы узнаем, как стилизовать svg объекты с помощью CSS.
Стилизовать svg объекты через css мы можем так же, как и html элементы, но есть некоторые исключения. Например, чтобы задать фоновый цвет, используется свойство fill, а рамка задаётся с помощью свойства stroke. Все свойства вы можете посмотреть на сайте консорциума w3.org.
Способы стилизации
Первый способ задания стилей - через атрибуты. Этот подход мы уже использовали в предыдущей статье.
<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 основан на XML и, следовательно, стили должны быть в секции CDATA.
Четвёртый способ задания стилей - вынести все стили в отдельный файл.
Ничего необычного. Просто вынесите все стили в отдельный .css файл и подключите его в теге head
<link rel="stylesheet" href="style.css">
Вот и все способы задания стилей для SVG объектов. Напоследок, давайте рассмотрим, как задавать общие стили для нескольких элементов.
<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>
С помощью тега g можно объединить несколько элементов и к каждому из них будут применены стили, заданные в теге g.
Вот и всё. Сегодня мы разобрались, как стилизовать SVG объекты через css.
-
Создано 10.05.2014 20:29:57
-
Михаил Русаков
Комментарии (1):
У меня пример со стилями заработал только без CDATA, с ним был чёрный квадрат
Ответить
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.