Стилизация масштабируемой векторной графики (SVG) с помощью CSS
Сегодня мы собираемся продолжить наше обсуждение масштабируемой векторной графики (SVG), и, как мы указывали в нашем предыдущем посте, одним из преимуществ использования SVG является то, что его можно стилизовать с помощью CSS.
SVG Styling Свойства
Стилизация SVG в основном работает так же, как и в обычных HTML-элементах, фактически они также имеют некоторые общие свойства. Однако есть и другие свойства, предназначенные специально для SVG-объекта, которые имеют свою спецификацию помимо CSS.
Например, в обычном HTML-элементе мы можем добавить цвет фона с помощью background-color или background CSS-свойства. В SVG все немного по-другому; цвет фона задается с помощью свойства fill. Кроме того, граница элемента задается свойством обводки, а не границей, как в обычном HTML, вы можете видеть полный список здесь,
Программы для Windows, мобильные приложения, игры - ВСЁ БЕСПЛАТНО, в нашем закрытом телеграмм канале - Подписывайтесь:)
Если вы довольно долго работали с векторным редактором, таким как 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. В следующем посте мы рассмотрим еще один, так что следите за обновлениями.
Программы для Windows, мобильные приложения, игры - ВСЁ БЕСПЛАТНО, в нашем закрытом телеграмм канале - Подписывайтесь:)