Основы SVG: Группы

Основы SVG: Группы

От автора: В данной статье мы рассмотрим основы SVG: группы. Группы или тег <g> в SVG по значению сродни <div>’у в HTML в том плане, что это контейнер для управления внутренними SVG элементами. Тем не менее, в отдельных вопросах они существенно отличаются, и эти различия очень важно понять.

Так же как и с <div>, в группах <g> стили наследуются дочерними элементами:

На выходе получим:

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

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

Узнать подробнее

Все трансформации с группами также наследуются дочерними элементами.

Но, в отличие от <div>, SVG группы нельзя позиционировать. Их можно переместить с помощью свойства transform, но так как у групп нет атрибутов X и Y, позиционировать в SVG документе их нельзя.

И снова как с <div>’ами, у групп есть атрибут id (и почти классы), используемые для стилизации или написания скриптов:

На выходе получаем:

(И в точности как при CSS наследовании, все правила, применяемые напрямую к элементам, переписывают стили от родительских элементов при конфликтах)

И, наконец, в отличие от <div>, у элементов <g> есть два дочерних тега <title> и <desc>, в которых прописываются метаданные и семантическое описание.

Adobe Illustrator и схожие визуальные редакторы обычно «перегружают» SVG файл при сохранении тонной бесполезных групп (связанных, как правило, с различными слоями). Чтобы избавиться от лишних групп, сведите слои, прежде чем сохранять файл; или же во время минификации с помощью программы SVGoMG можно удалить лишние теги.

Источник: http://thenewcode.com/

Редакция: Команда webformyself.

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

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

Узнать подробнее

PSD to HTML

Верстка сайта на HTML5 и CSS3 с нуля

Смотреть

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий