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

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

SVG Styling Свойства

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

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

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

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

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

Рекомендуемое чтение: просмотр уровня приоритета стиля CSS

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

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

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

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

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

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

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

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

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

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

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

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

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