Стилизация SVG с помощью CSS - Часть 2

Reading time ~3 minutes

Продолжение предыдущей статьи “Стилизация SVG с помощью CSS - Часть 1”, посвященной формату векторной графики SVG.

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

Между языками HTML и CSS существует четкая и ясная взаимосвязь: язык HTML предназначен для структуризации контента на странице; задача языка CSS - внешнее оформление этого контента. Формат SVG размывает четкие границы этой взаимосвязи. Например, формат версии SVG1.1 не нуждается в CSS для стилизации отдельных элементов SVG-объектов - для этой цели имеются так называемые презентационные атрибуты.

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

Показанный ниже пример является кодом, в котором используются презентационные атрибуты для стилизации границы "border" (stroke) и фоновой заливки "background color" (fill) многоугольника в виде пятиконечной звезды:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="300px" height="300px" viewBox="0 0 300 300">
  <polygon
    fill = "#FF931E"
    stroke = "#ED1C24"
    stroke-width = "5"
    points = "279.1,160.8 195.2,193.3 174.4,280.8   117.6,211.1 27.9,218.3 76.7,142.7 42.1,59.6 129.1,82.7 197.4,24.1 202.3,114 "/>
</svg>

Star SVG

В этом примере атрибуты fill, stroke, stroke-width являются презентационными атрибутами.

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

В формате SVG2 имеются несколько презентационных атрибутов, таких как x, y, width, height, cx, cy и некоторые другие, которые невозможно задать с помощью CSS в SVG1.1. Список новых SVG-атрибутов можно посмотреть по этой ссылке - SVG2 спецификация.

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

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" style="width: 300px; height: 300px;" viewBox="0 0 300 300">
  <polygon
    style = "fill: #FF931E; stroke: #ED1C24; stroke-width: 5;"
    points = "279.1,160.8 195.2,193.3 174.4,280.8   117.6,211.1 27.9,218.3 76.7,142.7 42.1,59.6 129.1,82.7 197.4,24.1 202.3,114 "/>
</svg>

Каскады стилей SVG

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

Презентационные атрибуты позиционируются как “авторские стилевые правила” и могут быть переопределены любыми другими определениями: внешними таблицами стилей, внутренними таблицами стилей или же inline-стилями.

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

Таблица каскадности стилей SVG

Например, представленный ниже образец кода является кругом, написанным на SVG. Цвет заливки круга в виде атрибута fill="blue" будет переопределен цветом deep pink с помощью правила style="fill:deepPink;":

<circle cx="100" cy="100" r="75" fill="blue" style="fill:deepPink;" />

Селекторы SVG

Большинство CSS-селекторов могут быть использованы для выборки SVG-элементов. В дополнение к основному типу, классам и идентификаторам, SVG-элементы могут быть стилизованы с помощью динамических псевдо-классов (:hover, :active, :focus) и псевдо-классов (:first-child, :visited, :link и :lang). Остальные псевдо-классы, включая тех, которые генерируют контент (такие как ::before и ::after) не являются частью спецификации SVG и поэтому не могут быть использованы для стилизации SVG-элементов.

Ниже приведен простой пример анимации фоновой заливки цветов круга при наведении. При этом используется селектор тега и псевдо-класс :hover.

Этот пример является простым, но можно создать и гораздо более сложные и интересные примеры. Еще одним простым, но интересным примером может послужить набор иконок Iconic, с помощью которых можно создать зажигающуюся лампочку. Демо-пример представлен здесь - demo of the effect .

Замечания

Так как презентационные атрибуты имеют XML-синтаксис, то они чувствительны к регистру. Например, при задании цвета заливки SVG-элемента атрибут должен быть записан как fill="...", но не как Fill="...".

Более того, ключевые значения этих атрибутов, такие как italic в font-style="italic", также чувствительны к регистру и должны записываться в коде точно так, как это указано в спецификации.

Все остальные стили указываются как CSS-свойства, вне зависимости, где они расположены. Будь то стилевые атрибуты, тег <br>, <style> или внешние таблицы стилей.

На этом все.


Различие между exports и module.exports

Попытка разобраться, в чем различие между exports и module.exports, основанная на статье Understanding module.exports ...Continue reading

Комментарии

Защита от автоматических сообщений
CAPTCHA
Введите слово на картинке