CSS cтили для SVG


Содержание

Журнал Automagically

Автомагический журнал про веб-дизайн и программирование

Стилизация SVG с помощью CSS: возможности и ограничения

SVG это новый стандарт векторных изображений в браузере. Векторные редакторы, такие как Adobe Illustrator, позволяют напрямую сохранять графику в этом формате, а современные браузеры без проблем отображают SVG.

Поскольку SVG изображения состоят из разметки, их можно создавать и поддерживать используя ваш любимый текстовый редактор, так же, как вы поступаете с HTML. Более того, можно даже стилизовать SVG с помощью CSS, хотя вам нужно будет познакомиться с различиями между стилизацией SVG и HTML.

SVG атрибуты и CSS свойства

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

В этом примере мы рисуем прямоугольник, который закрашивается с помощью атрибута fill . Цвет и ширина внешней рамки прямоугольника задана атрибутами stroke и stroke-width . Но вы также можете стилизовать прямоугольник следующим образом, используя CSS:

Мы просто использовали атрибуты, как CSS свойства. Хотя, это работает не для всех атрибутов. Вы не сможете задать этом способом позицию и значения ширины и высоты. Мы просто будем использовать атрибут y , а также width и height .

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

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

Использование псевдоклассов

В SVG возможно использование псевдоклассов, таких как :hover , даже в содействии с CSS3 свойством transition .

Реализовав этот пример, мы увидим, что при наведении курсора на элемент, с заданным для него классом example, цвет заливки изменится с красного на синий. Чтобы все это работало как следует, не вставляйте SVG с помощью тега img . Лучше используйте embed или iframe :

При использовании тега img сам SVG отобразится корректно. Но hover -эффект и переходы будут проигнорированы. Помимо свойства transition мы также можем использовать transform . В этом случае элементы будут масштабироваться или вращаться.

Используя CSS3, не забывайте добавлять вендорные префиксы, чтобы обеспечить поддержку как можно большего числа современных браузеров. В то время как Chrome и Firefox безупречно справляются с отрисовкой, Internet Explorer отказывается показывать ваше творение, хотя он вполне способен показать эти CSS3 свойства, если применить их к HTML.

Медиа запросы и SVG

Если вы хотите настроить адаптацию вашего SVG под определенные разрешения, просто используйте медиа запросы, прямо внутри него:

В этом примере, элементы для которых задан класс example не будут показываться, как только видимая ширина экрана станет меньше 800 пикселей. Будьте внимательны, здесь говориться не о ширине документа, а о ширине элемента несущего SVG.

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

В этом примере мы не отображаем заливку при печати. Я надеюсь у меня получилось показать, насколько легко использовать CSS для работы с SVG. Преимущества очевидны. Хотя, старые браузеры и Interner Explorer по-прежнему буду приносить кучу проблем.

Оригинал статьи на английском на сайте Noupe

6 Стилизация

Содержание

6.1 Средства стилизации в SVG

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

  • Параметров, которые имеют чисто визуальный характер, и поэтому поддаются стилизации. Примерами являются все атрибуты, которые описывают как объект «прорисован», такие как цвета заливки и обводки , цвета линий и стили контура.
  • Параметров стилизации текста, таких как ‘font-family’ и ‘font-size’ .
  • Параметров, которые сжимают путь отображения графических элементов, таких как указатели обрезки пути, маски, окончания стрелок, маркеры и фильтры.

SVG разделяет многие свойства стилизациии с CSS [CSS2] и XSL [XSL]. За исключением нескольких дополнительных, специфических правил SVG, конкретно упомянутых в данной спецификации, нормативным определением свойств SVG, которые являются общими с CSS и XSL, является определение свойств из спецификации CSS2 [CSS2].

Следующие свойства являются общими для CSS2 и SVG. Большинство этих свойств также определены и в XSL:

Следующие свойства SVG не определены в [CSS2]. Полное нормативное определение для этих свойств можно найти в данной спецификации:

Таблица, содержащая список всех свойств расположена в Индексе свойств.

6.2 Использование сценариев для стилизации

В SVG существует множество сценариев использования для решения различных задач. Вот три типичных сценария использования:

Содержание SVG используется как изменяемый формат (таблица стилей, не зависящая от языка):

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

Содержание SVG, созданное как выходные данные из XSLT [XSLT]:

XSLT предоставляет возможность принять поток произвольного содержания XML в качестве входных данных, применить возможные преобразования, а затем сгенерировать содержание SVG в качестве выводных данных. XSLT может быть использован для преобразования XML-данных, извлеченных из базы данных, в графическое представление этих данных в виде SVG. Это требование, по которому полностью указанное содержание SVG может быть создано с помощью XSLT.

Содержание SVG, стилизованное с помощью CSS [CSS2]:

CSS является широкое распрастранённым декларативным языком для присвоения свойств стиля содержанию XML , включая SVG. Он представляет собой сочетание функциональности, простоты и компактности, что делает его очень подходящим для многих приложений SVG. Это является требованием, по которому CSS могут быть применены к содержанию SVG.

6.3 Альтернативные способы задания свойств стилизации

Свойства стилизации могут быть применены к элементам SVG с помощью:

Атрибутов представления

Свойства стилизации могут быть присвоены с помощью атрибутов представления SVG. Для каждого свойства стиля, определённого в этой спецификации, существует соответствующий атрибут представления, доступный всем используемым элементам SVG. Подробная информация об атрибутах представления находится в Указании свойст, используемых атрибутами представления.

Атрибуты представления- независимый язык таблицы стилей и поэтому применимы к сценарию использования 1 выше (т.е., средство взаимодействия). Из-за простоты присвоения значений атрибутам XML через XSLT атрибуты представления хорошо подходят для сценария использования 2 , описаннго выше ( т.е., создание SVG из XSLT). (См. Стилизация с XSL ниже.)

CSS

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

Соответствующие SVG- интерпретаторы и Соответствующие средства просмотра SVG , которые поддерживают стилизацию CSS основного ( т.е. текстового) содержания XML, требуются для поддержки стилизации содержания SVG с помощью SCC.

6.4 Спецификация свойств, используемых атрибутами представления

Для каждого свойства стилизации, определённого в данной спецификации (см. Индекс свойств), существует соответствующий XML атрибут ( атрибут представления ) с тем же названием, который доступен для всех соответствующих элементов SVG. Например, SVG имеет свойство ‘fill’ , определяющее как закрасится фигура. Существует соответствующий атрибут представления с тем же именем (т.е., fill ) который может быть использован для указания значения свойства ‘fill’ данного элемента.

Следующий пример показывает как свойства ‘fill’ и ‘stroke’ можно назначить прямоугольнику, используя атрибуты представления fill и stroke . Прямоугольник будет закрашен красным цветом и обведён синим:

Атрибуты представления имеют следующие преимущества:

  • Широкая поддержка. Все версии Соответствующих SVG- интерпретаторов и Соответствующих средств просмотра SVG необходимы для поддержки атрибутов представления.
  • Простота.Свойства стилизации могут быть прикреплены к элементам простым указанием значений атрибутов представления соответветствующих элементов.
  • Изменение стилизации.Содержание SVG, использующее атрибуты представления, является полностью совместимым с предыдущими версиями, использующими XSLT [XSLT] или дополнительную стилизацию с помощью добавления правил стилизации CSS для переопределения некоторых атрибутов представления.
  • Удобство создания при помощи XSLT [XSLT]. В некоторых случаях можно использовать XSLT для создания полностью стилизованного содержания SVG. Атрибуты представления совместимы с удобством создания SVG из XSLT.

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

  • Стилизация содержания. Атрибуты представления, применяемые непосредственно к конкретным элементам, уменьшают потенциальные преимущества, которые даёт абстрагирование стилизации от содержания, такие как возможность изменения стилизации документа для различных областей и окружения.
  • Уплощение модели данных. Уже сами по себе, атрибуты представления не предоставляют более высокий уровень абстрагирования, который Вы получаете с помощью системы стилизации, таких как возможность определять именнованный список свойств, который применяется к конкретным категориям элементов. В результате, во многих случаях, важная семантическая информация более высокого уровня может быть потеряна, повторное использование документа и изменение стилизации труднее.
  • Потенциальное увеличение размера файла. . Многие виды графики используют похожие свойтва стилизации для разных элементов. Например, для графика организации компании можно назначить один список свойств стилизации для обозначения временных работников( например, красная пунктирная линия) и другой список свойств стилизации для постоянных работников (например, сплошная синяя линия). Системы стилизации, такие как CSS, позволяют определять список свойств в файле один раз. С атрибутами стилизации необходимо указывать атрибуты представления для каждого отдельного элемента.
  • Возможные трудности при встраивании в CSS-стилизованный документ- родитель . Когда содержание SVG встроено в другой XML и возникает необходимость стилизовать все аспекты нескольких документов с помощью CSS, использование атрибутов представления может вызвать трудности. В этом случае иногда проще, если содержание SVG не использует атрибуты представления и вместо этого использует средства CSS.

Для браузеров, поддерживающих CSS, атрибуты представления должны быть переведены на соответствующие CSS правила согласно правилам, описанным в разделе 6.4.4 Спецификация CSS2, Приоритет атрибутов представления не -CSS , с дополнительными разъяснениями, что атрибуты представления концептуально встроены в новую таблицу стилей автора, которая является первой в коллекции таблиц стилей автора. Таким образом, атрибуты представления будут участвовать в CSS2 каскаде как если бы они были заменены соответствующими правилами стиля CSS, размещёнными в начале таблицы стилей автора с нулевой спецификацией. В общем, это означает, что атрибуты представления имеют меньший приоритет, чем другие правила стиля CSS, указанные в таблицах стилей автора или атрибутах style .

Браузеры, которые не поддерживают CSS, должны игнорировать любые правила стиля CSS , указанные в таблицах стилей CSS и атрибутах style . В этом случае каскад CSS не применяется. (Наследовании свойств, однако, применяется. См. Наследование свойств.)

!важно объявление внутри описания атрибутов представления является ошибкой.

Анимация атрибутов представления эквивалентна анимации соответствующих свойств. Таким образом, тот же эффект происходит с анимацией с представлением атрибута attributeType=»XML» как это происходит с анимацией соответствующих свойств с attributeType=»CSS» .

6.5 Определение Entity для атрибутов представления

Следующие entities определены в DTD для всех атрибутов представления в SVG:

6.6 Стилизация с XSL

Таблицы стилей XSL (см. [XSLT]) описывают как трансформировать XML во что-нибудь другое, обычно другой XML. Когда XSLT используется в сочетании с SVG, иногда содержание SVG служит как входными так и выходными данными для таблиц стилей XSL. В других случаях таблицы стилей XSL могут брать код, не содержащий SVG, и создавать SVG как выходные данные.

В следующем примере используется внешняя таблица стилей XSL для преобразования содержания SVG в модифицированный SVG (см. Сссылка на внешние таблицы стилей). Таблица стилей устанавливает свойства ‘fill’ и ‘stroke’ для всех прямоугольников на красный и зелёный цвета соответственно:

6.7 Стилизация с помощью CSS

SVG, поддерживающий CSS, требуется для поддержки:

  • внешних таблиц стилей CSS, которые ссылаются на какой- либо документ из текущего документа (см. Ссылки на внешние таблицы стилей)
  • внутренних таблиц стилей CSS (т.е., таблиц стилей, заложенных в текущем документе, таких как элемент SVG ‘style’ )
  • текущего стиля (т.е., свойства CSS объявляются в рамках атрибута style для каждого элемента SVG )

В следующем примере показано использование внешних таблиц стилей CSS для установки свойств ‘fill’ и ‘stroke’ для всех прямоугольников на красный и синий цвета соответственно:

Таблицы стилей CSS могут быть встроены в содержание SVG внутри элемента ‘style’ . В следующем примере используется внутренняя таблица стилей CSS для достижения результата как в примере, описанном выше:

Обратите внимание, как таблица стилей CSS размещена внутри конструкции CDATA (т.e., ). Размещение внутренней таблицы стилей CSS в блоке CDATA иногда необходимо, так как таблицы стилей CSS могут включать символы, такие как «>», которые конфликтуют с XML. Даже если данная таблица стилей не используются символы, которые конфликтуют с XML, настоятельно рекомендуется помещать внутренние таблицы стилей внутрь блока CDATA .

Вставки, которые поддерживают CSS, также требуются для поддержки текущего стиля CSS. Похожий на атрибут style в HTML, в SVG текущий стиль CSS может быть задан в атрибуте style с помощью списка свойств, разделённых точкой с запятой, где каждое свойство представленов в виде «имя: значение».

В следующем примере показано как свойства ‘fill’ и ‘stroke’ могут быть присвоены прямоугольнику, при помощи атрибута style . Также как и в предыдущем примере, прямоугольник будет закрашен красным и обведён синим цветом:

В SVG браузере, который поддерживает таблицы стилей CSS , должны поддерживаться следующие особенности из [CSS2] :

  • Селекторы CSS2 в таблице стилей (см.: [Селекторы]). Поскольку SVG предназначена для использования в качестве одного из компонентов в именнованном множестве XML-приложения и CSS2 не является именнованным массивом, типичные селекторы будут противопоставлены только локальной части соответствующих имён элементов.
  • Внешние таблицы стилей CSS [XML-SS],таблицы стилей CSS внутри элементов ‘style’ и блоки объяснения CSS внутри атрибутов стиля привязаны к конкретным элементам SVG
  • Правила CSS2 для присвоения свойств значениям, создания каскадов и для наследования.
  • @font-face, @media, @import and @charset внутри таблиц стилей.
  • Динамические псевдо- классы CSS2 :hover, :active и :focus и псевдо- классы :first-child, :visited, :link и :lang. Остальные псевдо- классы CSS2, в том числе те, которые связаны с созданным содержанием, не являются частью определения языка SVG. (Примечание: выгоды элементов SVG видны, когда элементы выделены. См. Выбор текста.)
  • Для целей аудио- информации, SVG представляет CSS-стилизируемую XML грамматику. В браузерах, которые поддерживают звуковые таблицы стилей, звуковые средства стилизации CSS могут быть применены как описано в [CSS2]. (См. звуковые таблицы стилей.)
  • Таблицы стилей CSS, описанные внутри элемента ‘style’ могут непосредственно характеризовать содержание данных элемента ‘style’ или могут быть помещены внутрь блока CDATA .

SVG определяет @color-profile по правилу [CSS2-ATRULES] для определения цветового профиля, так что цветовые профили ICC могут быть применены к CSS-стилизованному содержанию SVG.

Обратите внимание на следующую информацию об относительных URI внешних таблиц стилей CSS : Спецификация CSS2 [CSS-URI] говорит, что относительные URI (как описано в [RFC2396]) внутри таблицы стилей разрешаются таким образом, чтобы базовым URI является тот, который описан в таблице стилей, а не тот, который является ссылкой.

6.8 Чувствительность к регистру имён и значений

Описание свойств через атрибуты представления выражается в XML [XML10], который является чувствительным к регистру. С другой стороны, описания свойств CSS определены либо в таблице стилей CSS либо в атрибуте style , которые, как правило, не чувствительны к регистру за несколькими исключениями(см. раздел 4.1.3 Символы и регистр спецификации CSS2 ).

Поскольку атрибуты представления выражаются как атрибуты XML, они являются чувствительными к регистру и должны точно совпадать с именами, как описано выше в «Определение Entity для атрибутов представления». Когда используется атрибут представления для определения значения свойства ‘fill’ , атрибут представления должен быть определён как ‘fill’, а не как ‘FILL’ или ‘Fill’. Ключевые значения, такие как «italic» в стиле шрифта=»italic» , также являются чувствительными к регистру и должны быть заданы с помощью точного регистра, указанного в спецификации, которая описывает данное ключевое значение. Например, значение «sRGB» должно иметь нижний регистр для «s» и верхний для «RGB».

Описание свойств внутри таблицы стилей CSS или в атрибуте style должно соответствовать правилам CSS, которые обычно менее чувствительны к регистру. Однако, для обеспечения согласованности между различными способами для выражения свойств стилизации, настоятельно рекомендуется, чтобы автор использовал точное значение имён ( как правило, с использованием строчных букв и дефисов) как указано в соответствующей спецификации и указывал все ключевые значения, учитывая регистр, как это требуется при использовании атрибутов представления, и не пользовался способностью CSS игнорировать регистр.

6.9 Средства CSS и XSL, которые используются в SVG

SVG разделяет различные соответствующие свойства и общие подходы с CSS и XSL, а также семантику многих правил обработки.

SVG разделяет следующие свойства с CSS и XSL:

  • Общие свойства. Многие из свойств SVG распределены между CSS2, XSL и SVG. (См. список общих свойств ).
  • Синтаксические правила. (Нормативные ссылки: [Синтаксис CSS2 и основные типы данных] и [Грамматика CSS2].)
  • Допустимые типы данных. (Нормативная ссылка: [Синтаксис CSS2 и основные типы данных]), за исключением, что SVG позволяет задавать значения для и без частицы- идентификатора. См. Частицы.)
  • Правила наследования.
  • Цвет ключевых слов из CSS2, которые соответствуют цветам, используемым объектами в пользовательской среде. (Нормативная ссылка: [ Системные цвета CSS2 ].)
  • Для создания SVG, поддерживающей CSS- стилизацию, необходимо, чтобы стилизация была совместима с различными другими правилами CSS.(См. Стилизация с помощью CSS.)

6.10 Ссылка на внешние таблицы стилей

Обращение к внешним таблицам стилей осуществляется с помощью механизма, описанного в документе «Связывание таблиц стилей с документами XML версии 1.0» [XML-SS].

6.11 Элемент ‘style’

Элемент ‘style’ позволяет встраивать таблицы стилей непосредственно внутрь содержания SVG . Элемент SVG ‘style’ имеет те же атрибуты, как соответствующий элемент в HTML (см. элемент HTML ‘style’ ).

type = content-type Этот атрибут определяет язык таблиц стилей содержимого элементов. Язык таблиц стилей указывается как тип содержимого (т.е., «text/css»), как в [RFC2045]. Необходимо указать значение этого атрибута; значения по умолчанию нет.
Animatable: no. media = media-descriptors Этот атрибут определяет середину места назначения для информации стиля. Это может быть одиночный медиа- дескриптор или список, разделённый запятыми. Значением по умолчанию для этого атрибута является «all». Набором утверждённых медиа-дескрипторов является список медиа- типов, утверждённых в CSS2 [ Медиа- типы, утверждённые в CSS2 ].
Animatable: no. title = advisory-title (Для поддержания совместимости с [HTML4]) Этот атрибут определяет консультативное название для элемента ‘style’ .
Animatable: no.

Синтаксис данных стиля зависит от языка таблиц стилей.

Некоторые языки таблиц стилей могут позволить более широкий список правил в элементе ‘style’ , чем в атрибуте style . Например, в CSS существуют некоторые правила, которые могут быть объявлены внутри элемента ‘style’ , и не могут быть объявлены внутри атрибута style .


Пример, показывающий элемент ‘style’ описан выше (см. пример).

6.12 Атрибут class

class = list Этот атрибут присваивает имя класса или набор имен классов элементу. Любому количеству элементов может быть назначено одно или несколько имён классов. Несколько имён классов должны быть разделены пробелами.
Animatable: yes.

Атрибут class назначает одно или несколько имён классов элементу. Элемент, можно сказать, принадлежит к этим классам. Одно имя класса могут использовать несколько экземпляров элемента. Атрибут class имеет несколько функций:

  • Как селектор таблицы стилей (когда автор хочет назначить стиль для определённого множества элементов).
  • Для общей обработки с помощью браузера.

В следующем примере элемент ‘text’ используется в сочетании с атрибутом class для выделения сообщений документа. Появляются сообщения на английском и французском языках.

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

6.13 Атрибут style

Атрибут style позволяет указывать правила стилизации элементов непосредственно для данного элемета. При использовании стилизации с CSS текущий стиль указывается включением списка свойств, разделённых точкой с запятой в виде «имя : значение» с помощью атирбута style

style = style Этот атрибут задает информацию о стиле для текущего элемента. Атрибут style определяет информацию о стиле для одного элемента. Язык таблиц стилей для текущих правил стилизации задаётся значением атрибута contentStyleType для элемента ‘svg’ . Синтаксис данных стиля зависит от языка таблиц стилей
Animatable: no.

Атрибут style может быть использован для применения определенного стиля к отдельному элементу SVG. Если стиль будет повторно использоваться для нескольких элементов, то нужно использовать элемент ‘style’ для группировки этой информации. Для обеспечения оптимальной гибкости, следует определять стили во внешних таблицах стилей.

Пример, показывающий использование атрибута style приведён выше (см.пример).

6.14 Определение языка таблицы стилей по умолчанию

Атрибут contentStyleType для элемента ‘svg’ указывает по умолчанию язык таблицы стилей для данного фрагмента документа.

6.15 Наследование свойств

Поддерживает или не поддерживает браузер CSS, наследование свойств в SVG следует правилам наследования свойств, описанным в спецификации CSS2. Нормативное определение наследования свойств описано в разделе 6.2 спецификация CSS2 (см. Наследование).

Определение каждого свойства содержит информацию о возможности наследования зачений.

В SVG, как и в CSS2, большинство эмементов наследуют вычисленные значения[ CSS2-COMPUTED]. В случаях, когда наследуется нечто иное, чем вычисленные значения, определение свойств описывается правилами наследования. Для указанных значений[ CSS2-SPECIFIED], которые выражаются в пользовательских единицах, в пикселях (например, «20px») или в абсолютных значениях [ CSS2-COMPUTED], вычисленное значение равно указанному значению. Для заданных значений, которые используют определенные относительные единицы (например, em, ex и проценты), вычисленное значение будет иметь теже единицы, что и значение, к которому оно относится.Таким образом, если родительский элемент имеет значение ‘font-size’ равное «10pt» , текущий элемент имеет значение ‘font-size’ равное «120%», то вычисленное значение ‘font-size’ для текущнго элемента будет «12pt». В случаях когда, ссылающиеся значения для относительных единиц не выражены ни в одной из стандартных единиц SVG (например, единицах CSS или пользовательских единицах), также когда используются проценты относительно текущего окна просмотра или области редактирования, вычисляемое значение будет в пользовательских единицах.

Обратите внимание, что SVG имеет некоторые особенности в свойствах, которые, будучи присвенными элементу- родителю, могут влиять на элемент- потомок, даже если элемент- потомок имеет другие значения свойств. Например, если свойство ‘clip-path’ указано для элемента- родителя и текущий элемент имеет значение свойства ‘clip-path’ равное ‘none’ , усечение пути элемента- родителя всё ещё применеяется к текущему элементу, потому что согласно семантике SVG усечение пути, используемое для данного элемента является пересечением путей усечения, указанных для этого элемента и для всех элементов- родителей. Ключевая концепция в том, что назначение свойств (с возможностью наследования свойств) происходит в первую очередь. После того, как значения свойств присвоены различным элементам, браузер применяет семантику для каждого присвоенного свойства, которое может происходить из назначенного элементом- родителем свойства, влияющем на отображение элементов- потомков.

6.16 Диапазон/область стилей

Диапазон/область таблицы стилей определяется следующим:

Автономный SVG документ Существует одно дерево разметки. Таблицы стилей определены в любом месте в документе SVG (в элементах стиля или атрибутах стиля, или во внешних таблицах стилей, связанных с таблицей стилей, в которой описаны инструкции) и применяются ко всему документу SVG . Автономный SVG документ, встроенный в HTML или XML документ, с элементами ‘img’, ‘object’ (HTML) или ‘image’ (SVG) Существуют два разных дерева разметки; одно для ссылающегося документа (возможно, HTML или XHTML), и другая для документа SVG. Таблицы стилей определены в любом месте ссылающегося документа (в элементах стиля или атрибутах стиля, или во внешних таблицах стилей, связанных с таблицей стилей, в которой описаны инструкции) и применяются ко всему документу, но не влияют на ссылаемый документ SVG. Таблицы стилей, определённые в любом месте документа, на который ссылаются,(в элементах стиля или атрибутах стиля, или во внешних таблицах стилей, связанных с таблицей стилей, в которой описаны инструкции) применяются ко всему документу SVG (возможно, HTML или XHTML).Чтобы получить одинаковую стилизации в [X] HTML документе и документе SVG, необходимо соедить в одну таблицу стилей. Автономный SVG, всторенный в содержание документа XML Существует одно дерево разметки, использующее несколько имён; одна или более ветвей находятся в пространстве имен SVG. Таблицы стилей определены в любом месте документа XML (в элементах стиля или атрибутах стиля, или во внешних таблицах стилей, связанных с таблицей стилей) и применяются ко всему документу, включая те части, которые находятся в пространстве имен SVG. Чтобы получить различную стилизацию для части SVG, необходимо использовать атрибуты стиля или присвоить ID к элементу ‘svg’ и использовать контекстуальные селекторы CSS или селекторы XSL.

Цукерберг рекомендует:  Чайник - С чего начать чайнику

6.17 Таблицы стилей браузера

Броузер должен поддерживать таблицу стилей браузера [CSS2-CASCADE-RULES] для элементов именнованного пространства SVG для визуализации [ CSS2-VISUAL]. Таблица стилей браузера ниже выражает используемый синтаксис CSS; однако, браузеры требуются для поддержки действий, которые соответствуют по умолчанию этой таблице стилей, даже если таблицы стилей CSS не поддерживаются этим браузером:

Первая строка выше таблицы стилей браузера вызовет первоначальное усечение пути чтобы вызвать в пределах первоначального просмотра. Кроме того, это вызовет новые усечения путей, чтобы вызвать в пределах перечисленных элементов, каждый из которых являетсяэлементом, создающим новую проекцию. (См. описание использования SVG свойства ‘overflow’ для более подробной информации.)

Вторая строка выше таблицы стилей браузера задаст атрибуты width и height элемента ‘svg’ , который будет использоваться как значение по умолчанию для свойств ‘width’ и ‘height’ в течение [CSS2-LAYOUT].

6.18 Звуковые таблицы стилей

Для целей аудио- информации, SVG представляет стилизуемую грамматику XML. В браузерах, которые поддерживают звуковые таблицы стилей CSS, звуковые свойства стилизации [CSS2-AURAL] могут быть применены как описано в [CSS2].

Звуковые свойства стилизации могут быть применены к любому элементу SVG, который может содержать характерные данные содержания, включая ‘desc’ , ‘title , ‘tspan’ . ‘tref’ . ‘altGlyph’ и ‘textPath’ . Для браузеров, которые поддерживают звуковые таблицы стилей, могут быть применены следующие свойства [CSS2] :

Для браузеров, которые поддерживают звуковые таблицы стилей и также поддерживают [DOM2], требуется поддерживать интерфейсы DOM, описанные в [DOM2-CSS], которые соответствуют звуковым свойствам [CSS2-AURAL]. (См. Связь с DOM2 CSS модели объекта.)

6.19 Модуль стиля

Элементы Атрибуты Содержание модели
style Core.attrib, type, media, title (#PCDATA)

6.19.1 Установки содержания стиля

Модуль стиля определяет установка содержания Style.class .

Имя установки содержания Элементы в установке содержания
Style.class style

6.19.2 Установка атрибутов стиля

Модуль стиля определяет установку атрибута Style.attrib .

Названия коллекции Атрибуты в коллекции
Style.attrib style, class

6.20 Интерфейсы DOM

Ниже определены следующие интерфейсы: SVGStyleElement.

Интерфейс SVGStyleElement

Интерфейс SVGStyleElement соответствует элементу ‘style’ .

Как изменить цвет svg

Изменим цвет svg картинки двумя способами: сначала используем свойство fill, затем mask-image

Первый способ. Картинка должна быть inline SVG. Если так, тогда просто изменим цвет с помощью свойства fill

Цвет svg картинки изменяется с помощью CSS свойства fill — заливки.

Если svg в вставлено в HTML в виде тега img, то нужно добавить следующий js-код

В данном примере мы используем класс img-svg, который мы добавляем к изображению в HTML-странице, благодаря которому svg-картинка из img станет inline svg

Изображение было в виде тега img

Изображение стало inline svg

Теперь можем изменить цвет нашей svg картинки, используя свойство fill, как в первом примере.

Какие ещё свойства можно применить к svg картинке

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

Второй способ. Реализуем с помощью свойства mask-image

В HTML создадим два элемента: div и ссылку

Используем свойство mask-image чтобы задать фон для картинки и background-color чтобы задать цвет

Что такое SVG? Стилизуем объекты.

Продолжаем изучать векторную графику и сегодня мы узнаем, как стилизовать svg объекты с помощью CSS.

Стилизовать svg объекты через css мы можем так же, как и html элементы, но есть некоторые исключения. Например, чтобы задать фоновый цвет, используется свойство fill, а рамка задаётся с помощью свойства stroke. Все свойства вы можете посмотреть на сайте консорциума w3.org.

Способы стилизации

Первый способ задания стилей — через атрибуты. Этот подход мы уже использовали в предыдущей статье.

Т.е. мы просто пишем название атрибута-свойства и через равно его значение.

Второй способ задания стилей — через атрибут style.

Пишем атрибут style и внутри него через точку с запятой свойства. Свойства задаются в таком формате: свойство: значение;

Третий способ задания стилей — через атрибут style в теге head.

Оформление содержимого в SVG с помощью CSS

Подробная статья об оформлении содержимого в элементе SVG и преодолении связанных с этим проблем.

Графика в формате SVG особо часто применяется для создания иконок и одной из самых распространенных техник для этого являются SVG-спрайты с использованием SVG use для инстанцирования иконок в нужном месте документа.

Инстанцирование иконок или любого другого содержимого SVG в элементе вызывает сложности при оформлении отдельных экземпляров. Цель этой статьи — дать вам обзор некоторых возможных способов обойти ограничения оформления, связанные с использованием .

Но перед тем как начать, давайте быстро рассмотрим основную структуру и группирование элементов в SVG, постепенно перейдя к , DOM, а затем вернемся обратно к CSS. Мы разберем, почему оформление может вызвать сложности и как их преодолеть.

Краткий обзор структуры SVG, группирования и ссылок на элементы в SVG

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

4 основных группирующих и связывающих элемента SVG это , , and .

Элемент (сокращение от “group” ) используется для логической группировки наборов связанных графических элементов. В терминах графических редакторов ( типа Adobe Illustrator) элемент по функционалу похож на функцию “Сгруппировать объекты”. Вы также можете думать о группе как о слое в графическом редакторе.

Группирование элементов полезно в тех случаях, когда вы хотите применить стиль ко всем элементам группы, а также, когда вы хотите анимировать все элементы группы, сохранив соотношение между ними.

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

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

У элемента есть еще одно важное преимущество: он принимает атрибут viewBox , который позволяет масштабирование внутри любой области видимости.

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

Чтобы использовать элемент вам надо передать ссылку на этот элемент, идентификатор — это атрибут xlink:href и спозиционировать его, задав атрибуты x и y . Вы можете применить стили к элементу и они будут каскадироваться на содержимое этого элемента.

Но что является содержимым ? Куда он клонируется? И как каскад CSS работает с ним?

Перед тем как ответить на эти вопросы и с учетом того, что мы только по-быстрому разобрали структуру и группирование SVG, стоит упомянуть пару статей,которые позволят вам узнать больше об этих элементах, а также об атрибуте viewBox в элементе :

SVG и теневой DOM

Когда вы ссылаетесь на элемент с помощью , ваш код выглядит примерно так:

На экране отображается иконка, содержимое которой определено внутри , но на самом деле это содержимое элемента , которое является клоном .

Но элемент это всего лишь один самозакрывающийся элемент — в нем нет контента между открывающим и закрывающим тегами, так куда же клонируется содержимое ?

Ответ — в теневой DOM (почему-то он всегда у меня ассоциируется с Бэтменом, не знаю почему).

Что такое теневой DOM?

Теневой DOM идентичен обычному DOM, за исключением того, что вместо того, чтобы быть частью дерева основного документа, узлы теневого DOM относятся к фрагменту документа, который является параллельным основному, но недоступным для его скриптов и стилей. Это дает авторам возможность создавать модульные компоненты, инкапсулируя скрипты и стили. Если вы когда-либо использовали элемент video или диапазонный ввод в HTML5 и не поняли, откуда появлялись элементы управления видеоплеером или слайдер, то ответ тот же — теневой DOM.

В случае с элементом SVG , содержимое, на которое он ссылается, клонируется в фрагмент документа, “хостящийся” в . В данном случае это теневой хост.

Итак, содержимое (клон или копия элемента, на который он ссылается) присутствует внутри теневого фрагмента документа.

Другими словами, содержимое находится там, но оно невидимое. Такое же, как и содержимое обычного DOM, но не доступное высокоуровневым средствам, таким как селекторы CSS и JavaScript, скопированное в фрагмент документа, привязанный к .

Теперь, если вы дизайнер, вы можете подумать: “ОК, я понял, но есть ли способ проверить этот субдокумент и увидеть его содержимое”. Ответ — да, вы можете просматривать содержимое теневого DOM, используя инструменты разработки в Chrome (в Firefox на данный момент эта функция не доступна). Но для начала вам надо активировать инспектора теневого DOM во вкладке General на панели настроек. Это подробно описано здесь.

После того, как вы активировали инспекцию теневого DOM в инструментах разработчика, вы можете видеть клонированные элементы на панели элементов, также как и элементы обычного DOM. На следующем изображении показан пример элемента , ссылающегося на содержимое элемента . Обратите внимание, что “#shadow-root” и его содержимое являются клоном содержимого .


Используя инструменты разработчика Chrome, вы можете инспектировать содержимое элемента use внутри теневого DOM (“#shadow-root”, строка выделена серым цветом). На этом скриншоте инспектируется логотип Codrops из примера, который мы будем рассматривать в следующем разделе.

Глядя на инспектируемый код, вы можете увидеть, что теневой DOM очень похож на обычный, за исключением того, как он обрабатывается CSS и JavaScript основного документа. Существуют также иные различия между ними, которые мы не будем рассматривать в этой статье по причине их объема, поэтому если вы хотите узнать больше, я рекомендую вам следующие статьи:

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

Как было сказано, содержимое теневого DOM недоступно для CSS в отличие от обычного DOM. Так как нам стилизовать его? Мы не можем использовать путь к потомкам типа такого:

Потому как у нас нет доступа к теневому DOM с помощью обычных CSS селекторов.

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

Кроме того, нам нужен простой способ оформить содержимое SVG без погружения в специфику теневого DOM, используя простой CSS и простой SVG.

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

Каскадирование стилей

Итак, CSS к SVG подключается тремя различными способами — внешними CSS стилями, внутренними стилями (внутри элемента ) и строчными стилями (в атрибуте style ), вся разница в каскадировании.

В дополнение к свойствам CSS, элементы SVG можно оформлять используя презентационные атрибуты. Презентационные атрибуты это сокращения для задания CSS-свойств элементу. Думайте о них как о специальных стилевых свойствах. Их природа позволяет использовать их в стилевом каскаде, но в несколько непривычном виде.

В следующем фрагменте кода мы получаем простой розовый круг с желтой обводкой. stroke , stroke-width и fill это презентационные атрибуты.

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

Спецификация SVG перечисляет атрибуты SVG, которые могут задаваться как свойства CSS. Некоторые из этих атрибутов есть среди обычных правил CSS, например, opacity и transform , а некоторые применяются только к SVG — fill , stroke и stroke-width .

В SVG2 этот список также включает x , y , width , height , cx , cy и несколько иных презентационных атрибутов, которые нельзя задать по спецификации SVG 1.1. Новый список можно найти в спецификации SVG2.

Возможно, вы, как и я ожидаете, что презентационные атрибуты имеют самую высокую специфичность среди всех стилевых правил. Ведь обычно внешние стили переписываются внутренними декларациями, а те в свою очередь переписываются строчными стилями атрибутов — они имеют максимальную специфичность, а, соответственно, и приоритет перед остальными стилями. И хотя это ожидание имеет смысл, действительный механизм работы отличен.

На самом деле, презентационные атрибуты рассматриваются как низкоуровневые “авторские таблицы стилей” и они переписываются остальными стилевыми декларациями: внешними, внутренними и инлайновыми стилями. Их единственная сила это приоритет перед унаследованными стилями. И все.

Теперь, когда мы выяснили это, вернемся к нашему элементу и его содержимому.

Мы знаем, что мы не можем задать стили внутри , используя CSS селекторы.

Но мы также знаем, что как и в случае с элементом , стили примененные к будут унаследованы всеми его потомками (которые находятся в теневом DOM).

Итак, сначала попытаемся изменить цвет заливки ( fill ) элемента внутри , применив селектор к самому элементу с расчетом, что каскад и наследование сделают свое дело.

Однако, это вызывает пару вопросов:

  1. Цвет заливки будет унаследован всеми потомками элемента , даже теми, к которым вы не хотите применять стили (но если внутри у вас всего один элемент, то этой проблемы не будет).
  2. Если вы экспортировали SVG из графического редактора или по каким-либо иным причинам не можете изменять код SVG, тогда вы в конечном итоге будете работать с SVG, к которому уже применены презентационные атрибуты (если вы явно не отмените это при экспорте в формат SVG) и значения этих атрибутов будут иметь приоритет над унаследованными от .

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

  1. Удаление атрибутов ради последующей установки определенных свойств сбросит значения этих свойств на дефолтные, а это, как правило, черная заливка и обводка (применительно к цветам).
  2. Сбрасывая значения, вы вынуждаете себя задавать стили для всего набора свойств.
  3. Презентационные атрибуты, которые изначально заданы, являются отличным запасным вариантом на случай возникновения проблем с внешними стилями. Если CSS не загрузится, у ваших иконок будет по-прежнему привлекательный вид.

Итак, у нас есть эти атрибуты, но при этом мы хотим оформить различные экземпляры иконок по разному.

Это делается за счет вынуждения презентационных атрибутов к унаследованию стилей, заданных или нахождения способа обойти переопределения этих значений. Чтобы сделать это, нам придется использовать всю мощь каскадирования CSS.

Давайте начнем с простых примеров и постепенно перейдем к сложным.

Переписывание значений презентационных атрибутов с помощью CSS

Презентационные атрибуты переписываются любой декларацией стилей. Мы можем это использовать, для того, чтобы презентационный атрибут получил значение, унаследованное от стилей .

Это просто благодаря ключевому слову CSS inherits. Взгляните на следующий пример — иконка мороженого, нарисованная одним контуром, цвет которого мы хотим изменять в разных экземплярах. Иконка создана Эрин Агноли из Noun Project.

Содержимое нашей иконки с мороженым ( path ) определено внутри элемента , а, значит, оно по умолчанию не будет выводится на холст.

Мы выводим множественные экземпляры иконки с помощью .

Ширину и высоту иконок мы задаем с помощью CSS. Я использую те же размеры, что и у viewBox , но они не должны быть идентичными. Однако, чтобы избежать избытка пустого пространства внутри SVG, убедитесь, что вы сохраняете соотношение между сторонами.

С этим кодом мы получили следующий результат:

Заметьте, что благодаря добавленным черным рамкам вокруг наших SVG вы видите границы каждого из них, в том числе и первого, в котором содержимое не рендерится. Запомните: SVG-документ, в котором вы определили symbol будет выводится на страницу, но без содержимого. Чтобы предотвратить это, используйте свойство display: none на первом SVG. Если вы не спрячете SVG с определениями иконок, он будет выводится на экран даже если вы не зададите для него размеры — он займет дефолтные 300 на 150 пикселей (это значение по умолчанию для незамещаемых элементов в CSS) и вы получите ненужный вам пустой блок на экране.

Теперь попробуем изменить цвет заливки для каждого экземпляра иконки:

Цвет заливки иконок по-прежнему не меняется, так как унаследованный цвет переписывается атрибутом fill=»#000″ в элементе path . Чтобы это не произошло, нам надо вынудить path унаследовать цвет:

Вуаля! Цвета, заданные элементам теперь применяются к path каждого из них. Проверьте демо и поэкспериментируйте со значениями, создавая экземпляры и задавая им разные цвета:

See the Pen mErELQ by prgssr (@prgssr) on CodePen.

Теперь эта техника работает, после того как мы вынудили содержимое унаследовать стили. Но во многих случаях это не совсем то, что вам нужно. Есть и другие способы оформления, к некоторым из них мы сейчас перейдем.

Оформление содержимого с помощью свойства CSS all

Некоторое время назад, при работе над иконкой, активируемой с помощью , мне надо было, чтобы один из элементов внутри него унаследовал все стили , такие как fill , stroke , stroke-width , opacity и даже transform . Таким образом, мне надо было контролировать все эти атрибуты через CSS, сохраняя при этом в разметке все презентационные атрибуты в качестве запасного варианта.

Если вы столкнетесь с похожей задачей, вы, вероятно, решите, что она займет слишком много времени, если все делать в CSS:

Рассмотрев этот сниппет, вы заметите паттерн, а, значит, имело бы смысл объединить все указанные свойства в одно и задать ему значение inherit .

К счастью, нам поможет свойство CSS all . В моем справочнике по CSS упоминается использование свойства all для оформления SVG, но стоит освежить наши знания.

Используя свойство all мы можем сделать так:

Это прекрасно работает во всех браузерах, поддерживающих all , однако надо учитывать следующий важный момент: эта декларация задает элементу наследование буквально всех свойств его родителя, в том числе и тех, которые вы не хотите задавать элементу. Поэтому, если вы не хотите, чтобы стилизовались все свойства CSS, вам это не подойдет — это крайняя мера и она частично подходит только тогда, когда у вас есть нестилизованный элемент и полный контроль над его свойствами в CSS. Если вы используете эту декларацию и не определяете значения для всех свойств CSS, они будут каскадироваться пока не найдут значение для наследования, в большинстве случаев это дефолтные стили браузера.

Заметьте, что это относится только к атрибутам, которые можно устанавливать с помощью CSS, а не к атрибутам, задаваемым только в SVG. Если атрибут может быть задан с помощью CSS — он унаследует стили, иначе нет.

Возможность активировать наследование презентационными атрибутами всех стилей , но что если у вас иконка, состоящая из нескольких элементов и вы не хотите, чтобы все они унаследовали один и тот же цвет заливки? Что если вы хотите применять множество различных цветов заливки для разных потомков? Задание одного стиля в уже не подходит. Нам нужно что-то другое, чтобы каскадировать нужные цвета к нужным элементам.

Использование переменной CSS currentColor для оформления содержимого

Использование переменной CSS currentColor в сочетании с техникой, описанной выше, позволяет определить два цвета для элемента, а не один. Год назад Фабрис Вайнберг написал об этом статью в своем блоге на Codepen.

Идея состоит в том, чтобы одновременно применять к свойства fill и color , а затем каскадировать эти свойства к содержимому , используя возможности переменной currentColor . Посмотрим на пример кода, чтобы понять, как это работает.

Предположим, мы хотим оформить это минималистичное лого Codrops, используя 2 цвета — один для передней капли, а второй для задней.

Во-первых, начнем с кода для этого изображения: у нас есть symbol , содержащий описание иконки и три экземпляра , создающие три экземпляра лого.

Если мы зададим цвет заливки ( fill ) в элементе для каждого экземпляра, этот цвет будет унаследован обоими каплями, что не является нашей целью.

Поэтому вместо определения цвета заливки и каскадирования его обычным способом, мы будем использовать переменную currentColor , чтобы меньшая капля на переднем плане была другого цвета и это значение мы зададим с помощью свойства color .

Для начала нам надо вставить currentColor туда, где мы хотим применить этот цвет — это будет место в разметке, где определяется иконка, то есть внутри . Теперь этот фрагмент выглядит так:

Затем нам надо удалить презентационный атрибут fill из второй капли и позволить ей унаследовать цвет заливки ( fill ) от элемента с помощью inherit .

Если бы мы использовали ключевое слово inherit , чтобы вынудить презентационные атрибуты унаследовать значения от , обе части унаследовали бы одинаковое значение, а currentColor не имела бы никакого эффекта. Поэтому в этой технике нам надо удалить тот атрибут, который мы хотим задать через CSS, а оставить только тот, в котором мы будем использовать currentColor .

Теперь, используя свойства fill и color в мы добавим стили к капле из логотипа:

Каждый элемент получает собственное значение fill и color . В каждом из них цвет fill каскадируется и заполняет первый контур, не имеющий атрибута fill , а цвет свойства color используется для задания атрибута fill во втором контуре.

Так что произошло следующее: значение текущего цвета просочилось в стили содержимого элемента за счет использования переменной currentColor . Изящно, не правда, ли?

Вот демо с использованным кодом:

See the Pen aZmZXV by prgssr (@prgssr) on CodePen.

Этот двухцветная техника отлично подходит для двухцветных лого. В своей статье Фабрис создал три различных версии лого Sass, изменяя цвет текста относительно фона.

Ключевое слово currentColor это единственная доступная переменная CSS на данный момент. Однако, если бы у нас было бы больше переменных, могли бы мы их использовать для заполнения еще большего количества значений в содержимом ? Да, могли бы. Амелия Беллами-Ройдс год назад представила концепцию этого в своем блоге на Codepen. Посмотрим, как это работает.

Будущее: оформление содержимого c помощью переменных CSS

Используя кастомные свойства CSS (переменные CSS) вы можете оформить содержимое , не вынуждая браузер переписывать значения презентационных атрибутов.

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

Переменные CSS, как и переменные препроцессоров могут найти множество использований, но цветовая темизация это один из самых распространенных вариантов. И в этом разделе мы рассмотрим, как мы можем их применить при оформлении SVG.

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

Мы будем использовать изображение этого прикольного робота-хипстера, созданного Freepik.

Код робота содержит все составляющие его цвета:

Теперь, мы не будем использовать переменные CSS в качестве значений атрибута fill для каждого контура. Вместо этого мы будем их использовать в качестве цветов заливки используя свойство CSS fill , сохранив на месте все атрибуты fill . Эти атрибуты будут использоваться в качестве запасного варианта для браузеров, не поддерживающих переменные CSS — изображение будет выглядеть в своем изначальном виде, если переменные CSS не работают.

С добавленными переменными код будет следующим:

Так как инлайновые теги style переписывают презентационные атрибуты, браузеры с поддержкой CSS-переменных будут использовать эти переменные для задания цвета заливки ( fill ). А браузеры, не поддерживающие их, будут использовать атрибут fill .

Цукерберг рекомендует:  Использование иконок загрузки

Затем нам надо задать значения для переменных в CSS. Но сначала инстанцируем изображение с помощью :

После этого зададим значения переменных для use , чтобы они могли каскадироваться к его содержимому. Выбранные вами цвета создадут цветовую схему рисунка. Так как в нашем роботе используется три основных цвета, мы назовем их primary , secondary и tertiary .

Вы по-прежнему можете использовать свойства fill и color вместе с этими переменными, но вы можете вполне обойтись и без этого. Итак, с цветами заданными в наших переменных, робот выглядит так:

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

Как было упомянуто, браузеры, не поддерживающие CSS-переменные используют заданные презентационные атрибуты в качестве запасного варианта, а браузеры с поддержкой переменных CSS используют их для заполнения свойства fill и переписывания атрибутов. Но что происходит, если браузер поддерживает переменные CSS, но вы забыли задать эти переменные в стилях или задали некорректное значение?

Для нашего робота-хипстера мы задали три переменных и только несколько его фрагментов не зависят от них — ведь он изначально разрабатывался для возможной темизации. Поэтому если вы запустите этот код в браузере с поддержкой переменных CSS и удалите все декларации с объявлением этих переменных, вы получите следующий результат:

Если значения переменных не заданы или не корректны, браузер будет использовать свой цвет по умолчанию, а это обычно черный цвет для заливки и обводки в SVG.

Обойти это можно, задав другой цвет в качестве запасного варианта для поддерживающих браузеров. Синтаксис переменных CSS позволяет сделать так: вместо передачи функции var() имени переменной в качестве аргумента, вы передаете два аргумента, разделенных запятой — имя переменной и запасной вариант, в данном случае это будет значение для презентационного атрибута.

Итак, теперь код нашего робота выглядит так:

И это все. Если у какой-либо переменной не будет задано значение, у браузера всегда будет в запасе цвет, заданный в качестве запасного варианта. Замечательно.

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

Вы можете поэкспериментировать с демо, создать сколько угодно копий робота и раскрасить его любыми цветами — не забудьте только, что для этого обязательно надо использовать браузер с поддержкой переменных CSS:

See the Pen vKXXYP by prgssr (@prgssr) on CodePen.

Если вы просматриваете это демо в браузере с поддержкой переменных CSS, то среди прочих вы увидите голубую с желтым версию робота, как мы и задавали в CSS-переменных. Иначе вы увидите трех одинаковых роботов с цветом запасного варианта.

Подводя итоги

Это была большая статья.


Используя возможности каскада CSS, оформление содержимого , хранимого в теневом DOM, становится менее сложным. А с переменными CSS ( currentColor или с пользовательскими свойствами) мы можем проникнуть в теневой DOM и кастомизировать нашу графику, как хотим, создавая при этом запасной вариант на случай проблем.

Лично мне очень симпатично сочетание переменных CSS и SVG. Мне нравятся их совместный функционал, особенно в части создания механизма запасного варианта.

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

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

6 Styling

Contents

6.1 SVG’s styling properties

SVG uses styling properties to describe many of its document parameters. Styling properties define how the graphics elements in the SVG content are to be rendered. SVG uses styling properties for the following:

  • Parameters which are clearly visual in nature and thus lend themselves to styling. Examples include all attributes that define how an object is «painted,» such as fill and stroke colors, linewidths and dash styles.
  • Parameters having to do with text styling such as font family and size.
  • Parameters which impact the way that graphical elements are rendered, such as specifying clipping paths, masks, arrowheads, markers and filter effects.

SVG shares many of its styling properties with CSS [CSS2] and XSL [XSL]. Except for any additional SVG-specific rules explicitly mentioned in this specification, the normative definition of properties that are shared with CSS and XSL is the definition of the property from the CSS2 specification [CSS2].

The following properties are shared between CSS2 and SVG. Most of these properties are also defined in XSL:

The following SVG properties are not defined in CSS2. The complete normative definitions for these properties are found in this specification:

A table that lists and summarizes the styling properties can be found in the Property Index.

6.2 Usage scenarios for styling

SVG has many usage scenarios, each with different needs. Here are three common usage scenarios:

SVG content used as an exchange format (style sheet language-independent):

In some usage scenarios, reliable interoperability of SVG content across software tools is the main goal. Since support for a particular style sheet language is not guaranteed across all implementations, it is a requirement that SVG content can be fully specified without the use of a style sheet language.

SVG content generated as the output from XSLT:

XSLT offers the ability to take a stream of arbitrary XML content as input, apply potentially complex transformations, and then generate SVG content as output [XSLT]. XSLT can be used to transform XML data extracted from databases into an SVG graphical representation of that data. It is a requirement that fully specified SVG content can be generated from XSLT.

SVG content styled with CSS:

CSS is a widely implemented declarative language for assigning styling properties to XML content, including SVG [CSS2]. It represents a combination of features, simplicity and compactness that makes it very suitable for many applications of SVG. It is a requirement that CSS styling can be applied to SVG content.

6.3 Alternative ways to specify styling properties

Styling properties can be assigned to SVG elements in the following two ways:

Presentation attributes

Styling properties can be assigned using SVG’s presentation attributes . For each styling property defined in this specification, there is a corresponding XML presentation attribute available on all relevant SVG elements. Detailed information on the presentation attributes can be found in Specifying properties using the presentation attributes.

The presentation attributes are style sheet language independent and thus are applicable to usage scenario 1 above (i.e., tool interoperability). Because it is straightforward to assign values to XML attributes from XSLT, the presentation attributes are well-suited to usage scenario 2 above (i.e., SVG generation from XSLT). (See Styling with XSL below.)

Conforming SVG Interpreters and Conforming SVG Viewers are required to support SVG’s presentation attributes.

CSS Stylesheets

To support usage scenario 3 above, SVG content can be styled with CSS. For more information, see Styling with CSS.

Conforming SVG Interpreters and Conforming SVG Viewers that support CSS styling of generic (i.e., text-based) XML content are required to also support CSS styling of SVG content.

6.4 Specifying properties using the presentation attributes

For each styling property defined in this specification (see Property Index), there is a corresponding XML attribute (the presentation attribute ) with the same name that is available on all relevant SVG elements. For example, SVG has a ‘fill’ property that defines how to paint the interior of a shape. There is a corresponding presentation attribute with the same name (i.e., ‘fill’ ) that can be used to specify a value for the ‘fill’ property on a given element.

The following example shows how the ‘fill’ and ‘stroke’ properties can be specified on a ‘rect’ using the ‘fill’ and ‘stroke’ presentation attributes. The rectangle will be filled with red and outlined with blue:

The presentation attributes offer the following advantages:

  • Broad support. All versions of Conforming SVG Interpreters and Conforming SVG Viewers are required to support the presentation attributes.
  • Simplicity. Styling properties can be attached to elements by simply providing a value for the presentation attribute on the proper elements.
  • Restyling. SVG content that uses the presentation attributes is highly compatible with downstream processing using XSLT [XSLT] [XSLT2] or supplemental styling by adding CSS style rules to override some of the presentation attributes.
  • Convenient generation using XSLT. In some cases, XSLT can be used to generate fully styled SVG content. The presentation attributes are compatible with convenient generation of SVG from XSLT.

In some situations, SVG content that uses the presentation attributes has potential limitations versus SVG content that is styled with a style sheet language such as CSS (see Styling with CSS). In other situations, such as when an XSLT style sheet generates SVG content from semantically rich XML source files, the limitations below may not apply. Depending on the situation, some of the following potential limitations may or may not apply to the presentation attributes:

  • Styling attached to content. The presentation attributes are attached directly to particular elements, thereby diminishing potential advantages that comes from abstracting styling from content, such as the ability to restyle documents for different uses and environments.
  • Flattened data model. In and of themselves, the presentation attributes do not offer the higher level abstractions that you get with a styling system, such as the ability to define named collections of properties which are applied to particular categories of elements. The result is that, in many cases, important higher level semantic information can be lost, potentially making document reuse and restyling more difficult.
  • Potential increase in file size. Many types of graphics use similar styling properties across multiple elements. For example, a company organization chart might assign one collection of styling properties to the boxes around temporary workers (e.g., dashed outlines, red fill), and a different collection of styling properties to permanent workers (e.g., solid outlines, blue fill). Styling systems such as CSS allow collections of properties to be defined once in a file. With the styling attributes, it might be necessary to specify presentation attributes on each different element.
  • Potential difficulty when embedded into a CSS-styled parent document. When SVG content is embedded in other XML, and the desire is to style all aspects of the compound document with CSS, use of the presentation attributes might introduce complexity and difficulty. In this case, it is sometimes easier if the SVG content does not use the presentation attributes and instead is styled using CSS facilities.

For user agents that support CSS, the presentation attributes must be translated to corresponding CSS style rules according to rules described in Precedence of non-CSS presentational hints ([CSS2], section 6.4.4), with the additional clarification that the presentation attributes are conceptually inserted into a new author style sheet which is the first in the author style sheet collection. The presentation attributes thus will participate in the CSS2 cascade as if they were replaced by corresponding CSS style rules placed at the start of the author style sheet with a specificity of zero. In general, this means that the presentation attributes have lower priority than other CSS style rules specified in author style sheets or ‘style’ attributes.

User agents that do not support CSS must ignore any CSS style rules defined in CSS style sheets and ‘style’ attributes. In this case, the CSS cascade does not apply. (Inheritance of properties, however, does apply. See Property inheritance.)

An !important declaration ([CSS2], section 6.4.2) within a presentation attribute definition is an invalid value.

Animation of presentation attributes is equivalent to animating the corresponding property. Thus, the same effect occurs from animating the presentation attribute with attributeType=»XML» as occurs with animating the corresponding property with attributeType=»CSS» (see ‘attributeType’ ).

6.5 Styling with XSL

XSL style sheets [XSLT] [XSLT2] define how to transform XML content into something else, usually other XML. When XSLT is used in conjunction with SVG, sometimes SVG content will serve as both input and output for XSL style sheets. Other times, XSL style sheets will take non-SVG content as input and generate SVG content as output.

The following example uses an external XSL style sheet to transform SVG content into modified SVG content (see Referencing external style sheets). The style sheet sets the ‘fill’ and ‘stroke’ properties on all rectangles to red and blue, respectively:

6.6 Styling with CSS

SVG implementations that support CSS are required to support the following:

  • External CSS style sheets referenced from the current document (see Referencing external style sheets)
  • Internal CSS style sheets (i.e., style sheets embedded within the current document, such as within an SVG ‘style’ element)
  • Inline style (i.e., CSS property declarations within a ‘style’ attribute on a particular SVG element)

The following example shows the use of an external CSS style sheet to set the ‘fill’ and ‘stroke’ properties on all rectangles to red and blue, respectively:

CSS style sheets can be embedded within SVG content ins >‘style’ element. The following example uses an internal CSS style sheet to achieve the same result as the previous example:

Note how the CSS style sheet is placed within a CDATA construct (i.e., ). Placing internal CSS style sheets within CDATA blocks is sometimes necessary since CSS style sheets can include characters, such as «>», which conflict with XML parsers. Even if a given style sheet does not use characters that conflict with XML parsing, it is highly recommended that internal style sheets be placed inside CDATA blocks.

The following example shows how the ‘fill’ and ‘stroke’ properties can be specified on a ‘rect’ using the ‘style’ attribute. Just like the previous example, the rectangle will be filled with red and outlined with blue:

In an SVG user agent that supports CSS style sheets, the following facilities from CSS2 must be supported:

  • CSS2 selectors within style sheets ([CSS2], chapter 5). Because SVG is intended to be used as one component in a multiple namespace XML application and CSS2 is not namespace aware, type selectors will only match against the local part of the element’s qualified name.
  • External CSS style sheets [XML-SS], CSS style sheets within ‘style’ elements and CSS declaration blocks ([CSS2], section 4.1.7) within ‘style’ attributes attached to specific SVG elements.
  • CSS2 rules for assigning property values, cascading and inheritance ([CSS2], chapter 6).
  • @font-face, @media, @import and @charset rules within style sheets ([CSS2], sections 15.3.1, 7.2.1, 6.3 and 4.4).
  • CSS2’s dynamic pseudo- >‘style’ element can be immediate character data content of the ‘style’ element or can be embedded within a CDATA section ([XML10], section 2.7).

SVG defines an @color-profile at-rule ([CSS2], section 4.1.6) for defining color profiles so that ICC color profiles can be applied to CSS-styled SVG content.

Note the following about relative URIs and external CSS style sheets: The CSS2 specification says ([CSS2], section 4.3.4) that relative URIs (as defined in Uniform Resource Identifiers (URI): Generic Syntax [RFC3986]) within style sheets are resolved such that the base URI is that of the style sheet, not that of the referencing document.

6.7 Case sensitivity of property names and values

Property declarations via presentation attributes are expressed in XML [XML10], which is case-sensitive. CSS property declarations specified either in CSS style sheets or in a ‘style’ attribute, on the other hand, are generally case-insensitive with some exceptions ([CSS2], section 4.1.3).

Because presentation attributes are expressed as XML attributes, presentation attributes are case-sensitive and must match the exact name as specified in the DTD (see the SVG.Presentation.attrib entity in the DTD, which expands to all of the presentation attributes). When using a presentation attribute to specify a value for the ‘fill’ property, the presentation attribute must be be specified as fill=»…» and not fill=»…» or Fill=»…» . Keyword values, such as italic in font-style=»italic» , are also case-sensitive and must be specified using the exact case used in the specification which defines the given keyword. For example, the keyword sRGB must have lowercase «s» and uppercase «RGB».

Property declarations within CSS style sheets or in a ‘style’ attribute must only conform to CSS rules, which are generally more lenient with regard to case sensitivity. However, to promote consistency across the different ways for expressing styling properties, it is strongly recommended that authors use the exact property names (usually, lowercase letters and hyphens) as defined in the relevant specification and express all keywords using the same case as is required by presentation attributes and not take advantage of CSS’s ability to ignore case.

6.8 Facilities from CSS and XSL used by SVG

SVG shares various relevant properties and approaches common to CSS and XSL, plus the semantics of many of the processing rules.

SVG shares the following facilities with CSS and XSL:

  • Shared properties. Many of SVG’s properties are shared between CSS2, XSL and SVG. (See list of shared properties).
  • Syntax rules. (The normative references are CSS2 syntax and basic data types and The grammar of CSS2; in [CSS2], chapter 4 and appendix D.)
  • Allowable data types. (The normative reference is CSS2 syntax and basic data types ([CSS2], chapter 4), with the exception that SVG length and angle values without a unit identifier. See Units.)
  • Inheritance rules.
  • The color keywords from CSS2 that correspond to the colors used by objects in the user’s environment. (The normative reference is CSS2 system colors; in [CSS2], section 18.2.)
  • For implementations that support CSS styling of SVG content, then that styling must be compatible with various other rules in CSS. (See Styling with CSS.)

6.9 Referencing external style sheets

External style sheets are referenced using the mechanism documented in Associating Style Sheets with XML documents Version 1.0 [XML-SS].

6.10 The ‘style’ element

The ‘style’ element allows style sheets to be embedded directly within SVG content. SVG’s ‘style’ element has the same attributes as the corresponding element in HTML (see HTML’s ‘style’ element).

type = content-type This attribute specifies the style sheet language of the element’s contents. The style sheet language is specified as a content type (e.g., «text/css»), as per MIME Part Two: Media Types [RFC2046]. If a ‘type’ is not prov >‘contentStyleType’ on the ‘svg’ element shall be used, which in turn defaults to «text/css» [RFC2046]. If a ‘style’ element falls outs >outermost svg element and the ‘type’ is not prov >‘type’ must default to «text/css» [RFC2046].
Animatable: no. media = media-descriptors This attribute specifies the intended destination medium for style information. It may be a single media descriptor or a comma-separated list. The default value for this attribute is «all». The set of recognized media-descriptors are the list of media types recognized by CSS2 ([CSS2], section 7.3).
Animatable: no. title = advisory-title (For compatibility with HTML 4 [HTML4].) This attribute specifies an advisory title for the ‘style’ element.
Animatable: no.

The syntax of style data depends on the style sheet language.

Some style sheet languages might allow a w >‘style’ element than in the ‘style’ . For example, with CSS, rules can be declared within a ‘style’ element that cannot be declared within a ‘style’ attribute.

An example showing the ‘style’ element is provided above (see example).

6.11 The ‘class’ attribute

class = list This attribute assigns a class name or set of class names to an element. Any number of elements may be assigned the same class name or names. Multiple class names must be separated by white space characters.
Animatable: yes.

  • As a style sheet selector (when an author wishes to assign style information to a set of elements).
  • For general purpose processing by user agents.

In the following example, the ‘text’ element is used in conjunction with the ‘class’ attribute to markup document messages. Messages appear in both English and French versions.

In an SVG user agent that supports CSS styling, the following CSS style rules would tell visual user agents to display informational messages in green, warning messages in yellow, and error messages in red:

6.12 The ‘style’ attribute

The ‘style’ attribute allows per-element style rules to be specified directly on a given element. When CSS styling is used, CSS inline style is specified by including semicolon-separated property declarations of the form «name : value» within the ‘style’ attribute. Property declarations must follow CSS style rules thus CSS defined properties (e.g. ‘font-size’) when having a value must include a unit (for non-zero values). See SVG’s styling properties for a list of CSS defined properties.

style = style This attribute specifies style information for the current element. The style attribute specifies style information for a single element. The style sheet language of inline style rules is given by the value of attribute ‘contentStyleType’ on the ‘svg’ element. The syntax of style data depends on the style sheet language.
Animatable: no.

The style attribute may be used to apply a particular style to an indiv >‘style’ element to regroup that information. For optimal flexibility, authors should define styles in external style sheets.

An example showing the ‘style’ attribute is provided above (see example).

6.13 Specifying the default style sheet language

The ‘contentStyleType’ attribute on the ‘svg’ element specifies the default style sheet language for the given document fragment.

Since the only widely deployed language used for inline styling (in style elements and style attributes) is CSS, and since that is already the default language if contentStyleType is omitted, in practice contentStyleType is not well supported in user agents. XSL style sheets are typically external. If a new style sheet language becomes popular, it might not use style attributes and could easily declare which language is in use with the type attribute on the style element.

The use of contentStyleType is therefore deprecated; new content should not use it. Future versions of the SVG specification may remove contentStyleType.

6.14 Property inheritance

Whether or not the user agent supports CSS, property inheritance in SVG follows the property inheritance rules defined in the CSS2 specification. The normative definition for property inheritance is the Inheritance section of the CSS2 specification ([CSS2], section 6.2).

The definition of each property indicates whether the property can inherit the value of its parent.


In SVG, as in CSS2, most elements inherit computed values ([CSS2], section 6.1.2). For cases where something other than computed values are inherited, the property definition will describe the inheritance rules. For specified values ([CSS2], section 6.1.1) which are expressed in user units, in pixels (e.g., 20px ) or in absolute values, the computed value equals the specified value. For specified values which use certain relative units (i.e., em, ex and percentages), the computed value will have the same units as the value to which it is relative. Thus, if the parent element has a ‘font-size’ of 10pt and the current element has a ‘font-size’ of 120% , then the computed value for ‘font-size’ on the current element will be 12pt . In cases where the referenced value for relative units is not expressed in any of the standard SVG units (i.e., CSS units or user units), such as when a percentage is used relative to the current viewport or an object bounding box, then the computed value will be in user units.

Note that SVG has some facilities wherein a property which is specified on an ancestor element might effect its descendant element, even if the descendant element has a different assigned value for that property. For example, if a ‘clip-path’ property is specified on an ancestor element, and the current element has a ‘clip-path’ of none , the ancestor’s clipping path still applies to the current element because the semantics of SVG state that the clipping path used on a given element is the intersection of all clipping paths specified on itself and all ancestor elements. The key concept is that property assignment (with possible property inheritance) happens first. After properties values have been assigned to the various elements, then the user agent applies the semantics of each assigned property, which might result in the property assignment of an ancestor element affecting the rendering of its descendants.

Цукерберг рекомендует:  Стилизованные табы

6.15 The scope/range of styles

The following define the scope/range of style sheets:

Stand-alone SVG document There is one parse tree. Style sheets defined anywhere within the SVG document (in style elements or style attributes, or in external style sheets linked with the style sheet processing instruction) apply across the entire SVG document. Stand-alone SVG document embedded in an HTML or XML document with the ‘img’ , ‘object’ (HTML) or ‘image’ (SVG) elements There are two completely separate parse trees; one for the referencing document (perhaps HTML or XHTML), and one for the SVG document. Style sheets defined anywhere within the referencing document (in style elements or style attributes, or in external style sheets linked with the style sheet processing instruction) apply across the entire referencing document but have no effect on the referenced SVG document. Style sheets defined anywhere within the referenced SVG document (in style elements or style attributes, or in external style sheets linked with the style sheet processing instruction) apply across the entire SVG document, but do not affect the referencing document (perhaps HTML or XHTML). To get the same styling across both the [X]HTML document and the SVG document, link them both to the same style sheet. Stand-alone SVG content textually included in an XML document There is a single parse tree, using multiple namespaces; one or more subtrees are in the SVG namespace. Style sheets defined anywhere within the XML document (in style elements or style attributes, or in external style sheets linked with the style sheet processing instruction) apply across the entire document, including those parts of it in the SVG namespace. To get different styling for the SVG part, use the ‘style’ attribute, or put an ‘id’ on the ‘svg’ element and use contextual CSS selectors, or use XSL selectors.

6.16 User agent style sheet

The user agent shall maintain a user agent style sheet ([CSS2], section 6.4) for elements in the SVG namespace for visual media ([CSS2], section 7.3.1). The user agent style sheet below is expressed using CSS syntax; however, user agents are required to support the behavior that corresponds to this default style sheet even if CSS style sheets are not supported in the user agent:

The first line of the above user agent style sheet will cause the initial clipping path to be established at the bounds of the initial viewport. Furthermore, it will cause new clipping paths to be established at the bounds of the listed elements, all of which are elements that establish a new viewport. (Refer to the description of SVG’s use of the ‘overflow’ property for more information.)

The second line of the above user agent style sheet will cause the ‘width’ and ‘height’ attributes on the ‘svg’ element to be used as the default values for the ‘width’ and ‘height’ properties during layout ([CSS2], chapter 9).

6.17 Aural style sheets

For the purposes of aural media, SVG represents a stylable XML grammar. In user agents that support CSS aural style sheets, aural style properties ([CSS2], chapter 19) can be applied as defined in CSS2.

Aural style properties can be applied to any SVG element that can contain character data content, including ‘desc’ ‘title’ ‘tspan’ , ‘tref’ , ‘altGlyph’ and ‘textPath’ . On user agents that support aural style sheets, the following CSS2 properties can be applied:

Aural property Definition in [CSS2]
‘azimuth’ Section 19.7
‘cue’ Section 19.5
‘cue-after’ Section 19.5
‘cue-before’ Section 19.5
‘elevation’ Section 19.7
‘pause’ Section 19.4
‘pause-after’ Section 19.4
‘pause-before’ Section 19.4
‘pitch’ Section 19.8
‘pitch-range’ Section 19.8
‘play-during’ Section 19.6
‘richness’ Section 19.8
‘speak’ Section 19.3
‘speak-header’ Section 17.7.1
‘speak-numeral’ Section 19.9
‘speak-punctuation’ Section 19.9
‘speech-rate’ Section 19.8
‘stress’ Section 19.8
‘voice-family’ Section 19.8
‘volume’ Section 19.2

For user agents that support aural style sheets and also support DOM Level 2 Core [DOM2], the user agent is required to support the DOM interfaces defined in Document Object Model CSS ([DOM2STYLE], chapter 2) that correspond to aural properties. (See Relationship with DOM2 CSS object model.)

Стилизация SVG с помощью CSS. Возможности и ограничения

SVG — это новый стандарт для векторных изображений в браузере. Векторные редакторы, такие как Adobe Illustrator, позволяют напрямую сохранить файл в данном формате, а у современных браузеров нет никаких проблем с правильным отображением SVG. Так как SVG графика состоит из разметки, она может быть создана и модифицирована в вашем любимом текстовом редакторе, который вы используете для HTML. Даже есть возможность стилизовать SVG с помощью CSS, но здесь есть несколько тонкостей.

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

В этом примере мы нарисовали прямоугольник, который закрашен с помощью fill . Цвет и прочность внешней рамки прямоугольника определяется атрибутами stroke и stroke-width.. Но, прямоугольник можно стилизовать точно также используя CSS:

Однако это не срабатывает для всех атрибутов. Вы не сможете определить позиции и значения для ширины и высоты данным образом. Мы просто будем придерживаться атрибутов y , width и height.

Так же, как и в HTML мы могли бы работать с классами и ID на любом элементе. Таким образом, мы бы задали внешний вид множеству элементов в SVG с помощью стилизованного класса.

Использование псевдо-классов

Использование псевдо-классов таких как :hover – возможно в SVG , даже в сочетании с CSS3 свойством transition.

Внедрив этот пример, hover элементы несущие example класс, приведет к изменению цвета с красного на синий. Чтобы это работало должным образом, убедитесь, что SVG не вставлен как Img. Лучше выберите Embed или Iframe:

Использование Img поможет отобразить SVG должным образом. Но, hover эффекты и transitions будут игнорироваться. Кроме transition мы могли бы использовать transform, тем самым позваляя элементам масштабироватьсь или поворачиваться.

При использовании CSS3 не забудьте добавить vendor префиксы, для поддержания максимального количества современных браузеров. В то время как у Chrome и Firefox нет никаких проблем с безупречным рендерингом, Internet Explorer откажется показыивать ваши творения даже в самой последней версии, в то время как он вполне способен показывать эти свойства CSS3 при использовании в HTML.

Медиа запросы и SVG

Если вы хотите настроить ваш SVG так, чтобы он мог менять размеры, тогда просто используйте медиа запросы прямо в нем:

Этот пример гарантирует, что элементы класса example не будут показываться, как только видимая ширина падает ниже 800 пикселей. Знайте, что не ширина документа определяет это, но ширина элемента несущая ваш ​​SVG.

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

В этом примере, мы упускаем показ цвета заливки (fill) при печати.

SVG Properties and CSS

SVG has its own set of elements, attributes and properties to the extent that inline SVG code can get long and complex. By leveraging CSS and some of the forthcoming features of the SVG 2 specification, we can reduce that code for cleaner markup.

Thanks, monday.com!

monday.com, an award-winning management tool, lets you easily manage multiple projects, track progress, and collaborate in one visual place.

There are many Scalable Vector Graphics (SVG), but only certain attributes can be applied as CSS to SVG. Presentation attributes are used to style SVG elements and can be used as CSS properties. Some of these attributes are SVG-only while others are already shared in CSS, such as font-size or opacity .

For example, to change the color of a element to red, use the fill property in CSS. The fill attribute is a presentation attribute, therefore it can be used as a CSS property:

So, with that, let’s take a deep and thorough dive into all of the SVG elements that are available to us as well as the CSS properties for them. We’ll also look at various styling approaches, including general presentational styles and animations.

SVG Elements by Category

The presentation attributes that can be used as CSS properties can be found below. For reference, supported elements will be classified by category. This does not include deprecated elements.

Element Type Elements
Container elements

Filter primitive elements

Gradient elements
  • Graphics elements

  • Shape elements

    Text content elements

    Properties shared between CSS and SVG

    Font properties

    Presentation attribute Supported elements
    font Text content elements
    font-family Text content elements
    font-size Text content elements
    font-size-adjust Text content elements
    font-stretch Text content elements
    font-style Text content elements
    font-variant Text content elements
    font-weight Text content elements

    Text properties

    Masking properties

    Presentation attribute Supported elements
    direction
    letter-spacing Text content elements
    text-decoration Text content elements
    unicode-bidi Text content elements
    word-spacing Text content elements
    writing-mode
    Presentation attribute Supported elements
    overflow

    Interactivity properties

    Presentation attribute Supported elements
    cursor Container elements
    Graphics elements

    Color properties

    Presentation attribute Supported elements
    color Applies to elements using:
    fill
    stroke
    stop-color
    flood-color
    lighting-color

    Visibility properties

    Presentation attribute Supported elements
    display Graphics elements
    Text content elements

    visibility Graphics elements
    Text content elements

    SVG CSS Properties

    Text properties

    Presentation attribute Supported elements
    alignment-baseline
    baseline-shift
    dominant-baseline Text content elements
    glyph-orientation-horizontal Text content elements
    glyph-orientation-vertical Text content elements
    kerning Text content elements
    text-anchor Text content elements

    Clip properties

    Presentation attribute Supported elements
    clip

    clip-path Container elements
    Graphics elements clip-rule

    Masking properties

    Presentation attribute Supported elements
    mask Container elements
    Graphics elements
    opacity Graphics elements

    Filter effects

    Presentation attribute Supported elements
    enable-background Container elements
    filter Container elements
    Graphics elements
    flood-color
    flood-opacity
    lighting-color

    Gradient properties

    Presentation attribute Supported elements
    stop-color
    stop-opacity

    Interactivity properties

    Presentation attribute Supported elements
    pointer-events Graphics elements

    Color properties

    Presentation attribute Supported elements
    color-profile referring to raster image

    Painting properties

    Presentation attribute Supported elements
    color-interpolation Container elements
    Graphics elements
    color-interpolation-filters Filter primitive elements
    color-rendering Container elements
    Graphics elements
    fill Shape elements
    Text content elements
    fill-rule Shape elements
    Text content elements
    fill-opacity Shape elements
    Text content elements
    image-rendering
    marker
    marker-start

    marker-mid marker-end shape-rendering Shape elements stroke Shape elements
    Text content elements stroke-dasharray Shape elements
    Text content elements stroke-dashoffset Shape elements
    Text content elements stroke-linecap Shape elements
    Text content elements stroke-linejoin Shape elements
    Text content elements stroke-miterlimit Shape elements
    Text content elements stroke-opacity Shape elements
    Text content elements stroke-width Shape elements
    Text content elements text-rendering

    SVG 2

    While presentation attributes can be used as CSS properties to style SVG, what about controlling the coordinates and dimensions of SVG elements using CSS? SVG 2, which is in Candidate Recommendation at the time of this writing, makes it is possible to style and animate these properties.

    Some styling properties can be specified not only in style sheets and ‘style’ attributes, but also in presentation attributes. These are attributes whose name matches (or is similar to) a given CSS property and whose value is parsed as a value of that property.»

    Not only does it mean that SVG properties can be styled using CSS as presentation attributes or in style sheets, but this also can be applied to CSS pseudo-classes such as :hover or :active .

    SVG 2 also introduces more presentation attributes that can be used as styling properties. These attributes can be found in SVG 2 specification.

    It is important to note that not every SVG element will support the same CSS properties. Much like how there are CSS properties that can be applied to certain SVG elements, there are specific properties that are supported by certain SVG elements.

    For example, the or elements support the cx and cy properties as coordinates of the center of the shape. The element also supports the rx and ry properties as the radius, but the element cannot use these properties.

    Geometry properties


    In SVG 2, properties such as rx and ry are defined as geometry properties. Geometry properties can be used as CSS properties, just like presentation attributes such as fill or stroke properties. These CSS properties and the corresponding SVG elements include:

    SVG Element Geometry Property
    cx
    cy
    r
    cx
    cy
    rx
    ry
    rx
    ry
    height
    width
    x
    y
    path
    height
    width
    x
    y
    height
    width
    x
    y
    code>height
    width
    x
    y

    Positioning SVG elements

    SVG 2 also makes it is possible to position SVG elements using CSS. Let’s begin with drawing a rectangle shape having the following SVG:

    And the following CSS:

    This will produce a rectangle shape with its coordinates set to 10, 10. With SVG 2, x and y can be applied as CSS properties:

    The SVG code would be reduced to this:

    You can even set the width and height for the element using CSS like so:

    That leaves us with just the following for SVG markup:

    At the time of writing, the following demos will work in Blink (e.g. Chrome and Opera) and WebKit (e.g. Safari) browsers as these browsers support SVG 2 features. Until then, let’s dive into how to override SVG properties using CSS.

    SVG shape morphing

    element can be overridden with CSS to create shape morphing.

    The SVG paths that morph one into the other must have the same commands and same number of points or else the morphing will not work.

    Let’s start with drawing a

    element in the shape of a triangle. Using the d property will specify the shape of the

    To get the triangle to morph into a different shape, let’s override the SVG

    element with the d property with CSS:

    Let’s also add a :active pseudo-class to the

    property so when the element is clicked, the shape will morph into a square and change its fill color. Let’s also add a transition property to make the shape morphing action appear smooth. Here is the CSS:

    And the SVG would be:

    Want another demo? Here is a cool demo from Chris Coyier demonstrating SVG shape morphing on hover!

    Animating SVG properties

    SVG properties can be animated using CSS through CSS animations and transitions.

    In this demo, we will draw various SVG elements and create a wave animation. Start by drawing five elements:

    We’ll be using CSS variables and :nth-child() CSS pseudo-class to define each .shape class. The .shape class will have a cy of 50 and a r of 20. Each of the .shape classes will have their own cx and fill CSS properties set:

    Here is how it should look so far.

    Now it’s time to animate! Start by using @keyframes rule to define the moveCircle animation:

    This will get each element to change their cy coordinates from 50 to 150 and r from 20 to 13. Add the following to the CSS to the .shape class get the animation running infinitely:

    Finally, add an animation-delay to each of the .shape classes to the CSS with the exception of .shape:nth-child(1) like this:

    elements can also be animated using CSS. Here is a cool demo by Dudley Storey showcasing that!

    Wrapping up

    As SVG 1.1 is the current standard, few browsers currently support SVG 2 features. It is not recommended to put these techniques into production yet. SVG 2 implementation is currently at Candidate Recommendation stage, thus support for styling SVG geometry properties with CSS should improve in the future.

    Масштабируемая векторная графика (SVG) — Оформление посредством CSS

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

    Если вы не читали предыдущую часть, то мы настоятельно рекомендуем вам с ней ознакомиться:

    Параметры оформления SVG-графики

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

    Например, в обычном HTML-элементе мы можем добавить цвет фона, посредством css-параметров background-color или background. В SVG все немного отличается. Цвет фона определяется параметром fill. Также граница элемента указывается посредством параметра stroke, а не посредством border, как это делается в обычном HTML-коде. Полный список различий вы можете найти здесь.

    Если вы когда-нибудь работали с векторным редактором вроде Adobe Illustrator, то вы без труда справитесь с названиями параметров в SVG.

    Для оформления SVG-элемента мы можем использовать следующие методы:

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

    Прямоугольник превратится в то, что вы видите на скриншоте ниже:

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

    Мы также можем добавить стилизацию посредством атрибута style. В данном примере мы также добавим параметры fill и stroke к элементу rect, но на этот раз мы добавим их посредством style, а также повернем их посредством параметра css3 transform:

    Прямоугольник превратится в то же, что и в прошлом примере, но только будет немного повернут:

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

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

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

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

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

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

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

    SVG-элементы можно сгруппировать посредством элемента «g». Группирование элементов позволит нам разделить основные стили для всех элементов в группе. Вот пример:

    Как прямоугольник, так и окружность будут иметь следующий результат:

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

    Вам понравился материал? Поблагодарить легко!
    Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

    Изменение цвета изображений товаров с помощью CSS Blend Mode и SVG

    Дата публикации: 2020-09-30

    От автора: простой способ добавления функции изменения цвета к изображениям товара, с помощью SVG и mix-blend-mode.

    Чтобы лучше пояснить это название, вот что мы собираемся изучить, и это проще, чем вы думаете. Попробуйте, измените цвет футболки с желтого на синий, используя палитру цветов в правом нижнем углу:

    Другой пример этого вы можете увидеть в демоверсии Раскрасьте этот диван!, в которой вы можете изменить цвет дивана и его градиент фона.

    Представьте себе это на секунду: Вы наконец-то сделали это, летом вы и ваш партнер собираетесь запустить сервис трафаретной печати из дома, это немного, но у вас есть рабочая установка, и несколько локальных группы и некоммерческие организаций уже проявили интерес. Ваш поставщик предоставляет футболки, брюки, шляпы и солнцезащитные очки по 2 доллара — это именно то, что вы искали. Они поставляют 25 цветов каждого наименования, и вы счастливы, что ваш сайт наконец-то запущен. Теперь все, что вам нужно сделать, это загрузить несколько фотографий товара! Проблема в том, что есть 25 цветов каждой единицы? Это 125 различных вариантов, как вам справиться с этим?

    Практический курс по верстке адаптивного сайта с нуля!

    Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

    Вы часто видели, как это происходит в Интернете, и решение почти всегда заключается в том, что товар отображен в одном цвете, а остальные варианты представлены маленькими точками.

    И по понятной причине, никто не хочет тратить время или деньги на фотографирование кого-то, одетого в более чем 125 предметов, так что, как и многие другие до вас, вы заставите своего друга смоделировать один цвет, и позволить потенциальному клиенту использовать воображение, чтобы представить другие варианты по цвету точек.

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

    Так что здесь происходит? Что это за магия?

    Это SVG-элемент с изображением за ним и векторной фигурой (элементом контура), нарисованной над частями, для которых вы хотите изменить цвет. Вы просто меняете цвет заливки элемента path и используете свойство CSS mix-blend-mode: multiply, чтобы закрасить его.

    Давайте начнем

    Загрузите это фото, если хотите следовать данному руководству.

    Эта часть важна: вам нужно знать размеры фотографии, и в идеале она должна быть адаптирована к потребностям сайта (например, квадратная фотография размером 1000×1000 пикселей ). Мой пример — 1920x1280px, и этот размер вы должны учитывать, когда мы все настроим.

    Во-вторых, часть фотографии, которую вы меняете, должна быть белой. Наша футболка белая, если бы мы меняли материал дивана или облицовку стены дома, материал и облицовка должны быть белыми.

    Часть 1. Создание разметки векторной фигуры / SVG

    Самый простой способ сделать это — через Adobe Illustrator, и эту программу мы будем использовать, но если у вас ее нет, вы можете воспользоваться бесплатной альтернативной Method Draw.

    Создайте холст того же размера, что и ваша фотография (1920 x 1280 пикселей), и поместите фотографию прямо по центру рамки.

    Совет: заблокируйте эту фотографию, чтобы она не сдвинулась с места.

    На изображении включена блокировка в панели слоев справа.

    Используя Инструмент перо, нарисуйте контур вокруг футболки, постарайтесь, чтобы этот контур был как можно ближе к реальной нужной части фотографии. Это звучит устрашающе, но, если сделать это вручную, вы получите наиболее точный конечный результат, и инструмент Перо — это то, что, хотя и требует некоторой практики, но работает тем лучше, чем больше вы его используете.

    Пара замечаний

    Undo вам поможет, проще отменить привязку и попробовать еще раз, чем пробовать переместить перо в нужное место

    Для того, что мы хотим сделать, лучше выйти на пиксель за границы, чем не дойти до края футболки.

    Отключите цвета обводки и заливки, пока вы делаете это, они, скорее всего, будут мешать

    Помните, что вы можете сделать несколько контуров вокруг разных частей фотографии, если вы, например, хотите изменить цвет шляпы, а также футболки.

    Экспорт SVG

    Теперь у вас есть контур вокруг футболки, залейте его любым цветом, чтобы увидеть результат, вы можете безопасно удалить исходную фотографию, оставив это:

    Когда мы экспортируем этот SVG, важно, чтобы Illustrator оставлял пустое пространство вокруг фигуры, потому что фотография заполнит эту область на веб-странице.

    Если вместо этого вы используете Method Draw, перейдите Вид> Источник, это будет сделано по умолчанию

    Это не делается по умолчанию в Illustrator, поэтому нам нужно перейти Файл> Экспорт> Экспорт для экранов, чтобы экспортировать весь холст, сохраняя относительную позицию в неизменном виде.

    Экспортируйте SVG в виде файла на компьютер. Откройте этот файл в текстовом редакторе, и вы увидите разметку SVG внутри. Это HTML-код, который мы будем использовать на веб-странице. Скопируйте все это.

    Очистка разметки SVG (необязательно)

    Перейдите в SVGOMG. Вставьте разметку и нажмите Разметка, теперь SVG стал чище, чем после экспорта из Illustrator.

    Если вы рисуете несколько контуров вокруг разных элементов, цвет которых должен изменяться независимо, стоит отключить опцию «Объединить контуры». Это может быть полезно в ситуациях, подобных нашему примеру, хотя рубашка — это два контура в исходной разметке SVG, и в идеале мы бы хотели, чтобы это был один элемент контура.

    Скопируйте разметку SVG, затем запустите новый CodePen. Или вы можете создать форк моего пена здесь:

    Прежде чем мы что-то сделаем, я рекомендую добавить эти стили CSS:

    Понравилась статья? Поделиться с друзьями:
    Все языки программирования для начинающих