Если вы не читали предыдущую часть, то мы настоятельно рекомендуем вам с ней ознакомиться:
Масштабируемая векторная графика (SVG) - Исследование
Параметры оформления SVG-графики
Процесс оформления SVG-графики в основном происходит таким же образом, как и в случае с обычными HTML-элементами. На самом деле, они даже разделяют между собой некоторые параметры. Тем не менее, есть и другие параметры, предназначенные специально для SVG-объектов, которые имеют отдельную спецификацию кроме CSS.
Например, в обычном HTML-элементе мы можем добавить цвет фона, посредством css-параметров background-color или background. В SVG все немного отличается. Цвет фона определяется параметром fill. Также граница элемента указывается посредством параметра stroke, а не посредством border, как это делается в обычном HTML-коде. Полный список различий вы можете найти здесь.
Если вы когда-нибудь работали с векторным редактором вроде Adobe Illustrator, то вы без труда справитесь с названиями параметров в SVG.
Стилизация SVG-графики
Для оформления SVG-элемента мы можем использовать следующие методы:
Атрибуты презентации
Если вы видели список SVG-параметров, то имейте в виду, что все они могут быть напрямую применены к элементу, чтобы изменить его представление. Следующие примеры показывают нам, как мы можем добавить параметры fill и stroke напрямую к элементу rect;
<svg>
<rect width="200" height="200" fill="slategrey" stroke="black" stroke-width="3"/>
</svg>
Прямоугольник превратится в то, что вы видите на скриншоте ниже:
Строчная таблица стилей
Мы также можем добавить стилизацию посредством атрибута style. В данном примере мы также добавим параметры fill и stroke к элементу rect, но на этот раз мы добавим их посредством style, а также повернем их посредством параметра css3 transform:
<svg>
<rect x="203" width="200" height="200" style="fill:slategrey; stroke:black; stroke-width:3; -webkit-transform: rotate(45deg);"/>
</svg>
Прямоугольник превратится в то же, что и в прошлом примере, но только будет немного повернут:
Внутренняя таблица стилей
Встраивание SVG-стиля посредством элемента style также возможно, и ничем не отличается от того же действия в обычном HTML. Этот пример отображает нам то, как мы добавляем внутренние стили к SVG-элементам в документе .html.
<style type="text/css" media="screen">
#internal rect {
fill: slategrey;
stroke: black;
stroke-width: 3;
-webkit-transition: all 350ms;
}
#internal rect:hover {
fill: green;
}
</style>
Тем не менее, SVG основан на языке XML, так что когда нам нужно будет добавить строчную таблицу стилей в .svg-документ, нам нужно будет поместить объявления стилей внутри cdata, следующим образом:
<style type="text/css" media="screen">
<![CDATA[
#internal rect {
fill: slategrey;
stroke: black;
stroke-width: 3;
-webkit-transition: all 350ms;
}
#internal rect:hover {
fill: green;
}
]]>
</style>
Здесь необходим cdata, так как CSS может иметь знак >, который будет конфликтовать с XML-парсерами. Крайне рекомендуется использовать cdata для встраивания стилей в SVG, даже если конфликтующий знак отсутствует в конкретной таблице стилей.
Внешняя таблица стилей
Внешняя таблица стилей работает по тому же принципу для SVG-элементов в .html-документе.
<link rel="stylesheet" type="text/css" href="style.css">
Опять же, в .svg-документе нам нужно сослаться на внешнюю таблицу стилей, как на xml-таблицу:
<?xml-stylesheet type="text/css" href="style.css"?>
Группирование элементов
SVG-элементы можно сгруппировать посредством элемента «g». Группирование элементов позволит нам разделить основные стили для всех элементов в группе. Вот пример:
<g style="fill:slategrey; stroke:black; stroke-width:3; fill-opacity: 0.5;">
<rect x="203" width="200" height="200"/>
<circle cx="120" cy="106" r="100"/>
</g>
Как прямоугольник, так и окружность будут иметь следующий результат:
В завершение
Мы только что рассказали вам важную информацию по поводу оформления SVG-элементов посредством CSS, и это лишь одно из нескольких преимуществ SVG-графики. В следующей статье мы расскажем вам об еще одном преимуществе, так что следите за новостями!
Посмотреть демо | Скачать исходный код
Внимание! У вас нет прав для просмотра скрытого текста.