Cила CSS поможет тебе принять форму, SVG! Использование SVG в качестве объекта object. Для чего используют SVG
Продолжение предыдущей статьи “Стилизация SVG с помощью CSS - Часть 1”, посвященной формату векторной графики SVG.
Стилизация с помощью CSS
Между языками HTML и CSS существует четкая и ясная взаимосвязь: язык HTML предназначен для структуризации контента на странице; задача языка CSS - внешнее оформление этого контента . Формат SVG размывает четкие границы этой взаимосвязи. Например, формат версии SVG1.1 не нуждается в CSS для стилизации отдельных элементов SVG-объектов - для этой цели имеются так называемые презентационные атрибуты .
Презентационные атрибуты являются сокращениями CSS-свойств для SVG-элементов. Можно думать об этих атрибутах, как о CSS-свойствах для SVG с особым синтаксисом. К этим свойствам применима каскадность стилей, но в этой статье мы поступим более кратким способом.
Показанный ниже пример является кодом, в котором используются презентационные атрибуты для стилизации границы
многоугольника в виде пятиконечной звезды:В этом примере атрибуты
| 1 | fill |
В формате SVG2 имеются несколько презентационных атрибутов , таких как
| 1 | x |
| 1 | y |
| 1 | width |
| 1 | height |
| 1 | cx |
| 1 | cy |
Другим способом стилизации SVG-элементов является использование для этой цели CSS-свойств. Точно также, как и в случае в HTML-элементами, CSS-свойства могут быть заданы с помощью inline-стиля:
Каскады стилей SVG
Как уже говорилось ранее, презентационные атрибуты являются специальной разновидностью свойств и что они представляют из себя просто сокращение CSS-свойств, применимых к SVG-элементам. Исходя из вышесказанного, логично предположить, что к презентационным SVG-атрибутам также, как и CSS-свойствам, применимо такое понятие как каскад стилей .
Презентационные атрибуты позиционируются как “авторские стилевые правила” и могут быть переопределены любыми другими определениями: внешними таблицами стилей, внутренними таблицами стилей или же inline-стилями.
Диаграмма ниже показывает порядок расположения стилей в каскаде стилей. Чем ниже расположены стили в этой таблице, тем большим количеством вышележащих стилей они могут быть перезаписаны. В нашем случае презентационные стили могут быть переопределены почти всеми другими стилями, кроме стилей агента пользователя :
Например, представленный ниже образец кода является кругом, написанным на SVG. Цвет заливки круга в виде атрибута
с помощью правила , , и .Замечания
Так как презентационные атрибуты имеют XML-синтаксис, то они чувствительны к регистру . Например, при задании цвета заливки SVG-элемента атрибут должен быть записан как
в ,| 1 |