Основы 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

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

Курс по HTML5: основы

Изучите HTML5 с нуля!

Смотреть курс

Метки:

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

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

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

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree