Стилизация масштабируемой векторной графики (SVG) с помощью CSS

Сегодня мы собираемся продолжить наше обсуждение масштабируемой векторной графики (SVG), и, как мы указывали в нашей предыдущей статье, одним из преимуществ использования SVG является то, что его можно стилизовать с помощью CSS..

SVG Styling Properties

Стилизация SVG в основном работает так же, как и в обычных HTML-элементах, фактически они также имеют некоторые общие свойства. Тем не менее, есть и другие свойства, предназначенные специально для SVG-объекта, которые имеют свою спецификацию помимо CSS.

Например, в обычном HTML-элементе мы можем добавить цвет фона либо фоновый цвет или же фон CSS свойство В SVG все немного по-другому; цвет фона задается с помощью заполнить собственность вместо Кроме того, граница элемента указывается с Инсульт собственность и не с граница как и в обычном HTML, полный список вы можете увидеть здесь.

Если вы довольно долго работали с векторным редактором, таким как Adobe Illustrator, вы можете быстро догадаться, что механизм именования свойств в SVG возник из редактора..

Реализация стиля SVG

Мы можем использовать один из следующих способов для стилизации элемента SVG;

Атрибуты презентации

Если вы видели все списки свойств SVG, все они могут быть добавлены непосредственно в элемент, чтобы изменить представление элемента. В следующем примере показано, как мы можем добавить заполнить а также Инсульт собственность прямо на прямоугольник элемент;

Прямоугольник будет похож на скриншот ниже;

Встроенная таблица стилей

Мы также можем добавить стиль с стиль приписывать. В следующем примере мы также добавим заполнить а также Инсульт к прямоугольник, но на этот раз мы добавим его в стиль и поверните его с помощью CSS3 преобразование собственность, как так;.

Прямоугольник превратится в тот же результат, только то, что он теперь также вращается;

Внутренняя таблица стилей

Вставить стиль SVG в стиль Элемент также возможен и ничем не отличается от того, как мы это делали на обычном HTML. В этом примере ниже показано, как мы добавляем внутренние стили для воздействия на элементы SVG в .HTML документ.

Однако SVG является языком на основе XML, поэтому, когда мы собираемся добавить встроенную таблицу стилей в .SVG документ, нам нужно поместить объявление стилей внутри CDATA, следующее;

CDATA здесь требуется, так как CSS может иметь > символ, который будет конфликтовать с парсерами XML. С помощью CDATA настоятельно рекомендуется для встраивания стиля в SVG, даже если конфликтующий символ не указан в таблице стилей.

Внешняя таблица стилей

Внешняя таблица стилей также работает для SVG-элементов в .HTML документ.

Опять в .SVG документ, мы должны ссылаться на внешнюю таблицу стилей как XML-таблицы стилей, вот так.

Группировка элементов

SVG элементы могут быть сгруппированы с элемент. Группировка элементов позволит нам совместно использовать общие стили для всех элементов в группе, вот пример;

И прямоугольник, и круг будут иметь одинаковый результат.

Последняя мысль

Мы рассмотрели все основные вопросы, касающиеся стилизации SVG с помощью CSS, и это лишь одно из преимуществ обслуживания графики с помощью SVG. В следующем посте мы рассмотрим еще один, так что следите за обновлениями.

• Посмотреть демо
• Скачать исходный код