От автора: В данной статье мы рассмотрим основы SVG: группы. Группы или тег <g> в SVG по значению сродни <div>’у в HTML в том плане, что это контейнер для управления внутренними SVG элементами. Тем не менее, в отдельных вопросах они существенно отличаются, и эти различия очень важно понять.
Так же как и с <div>, в группах <g> стили наследуются дочерними элементами:
|
1 2 3 4 5 6 |
<svg viewBox="0 0 400 160"> <g fill="#33E" stroke="#000" stroke-width="10px"> <circle cx="88" cy="80" r="62"/> <rect x="246" y="17" width="123" height="123"/> </g> </svg> |
На выходе получим:
Все трансформации с группами также наследуются дочерними элементами.
Но, в отличие от <div>, SVG группы нельзя позиционировать. Их можно переместить с помощью свойства transform, но так как у групп нет атрибутов X и Y, позиционировать в SVG документе их нельзя.
И снова как с <div>’ами, у групп есть атрибут id (и почти классы), используемые для стилизации или написания скриптов:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<svg viewBox="0 0 400 163"> <style type="text/css"> #svg-container { fill: hsl(45,80%,80%); stroke: rgba(0,0,0,0.3); stroke-width: 10px; } </style> <g id="svg-container"> <circle cx="88" cy="80" r="62"/> <rect x="246" y="17" width="123" height="123"/> </g> </svg> |
На выходе получаем:
(И в точности как при CSS наследовании, все правила, применяемые напрямую к элементам, переписывают стили от родительских элементов при конфликтах)
И, наконец, в отличие от <div>, у элементов <g> есть два дочерних тега <title> и <desc>, в которых прописываются метаданные и семантическое описание.
Adobe Illustrator и схожие визуальные редакторы обычно «перегружают» SVG файл при сохранении тонной бесполезных групп (связанных, как правило, с различными слоями). Чтобы избавиться от лишних групп, сведите слои, прежде чем сохранять файл; или же во время минификации с помощью программы SVGoMG можно удалить лишние теги.
Источник: //thenewcode.com/
Редакция: Команда webformyself.
