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

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

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

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

<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 (и почти классы), используемые для стилизации или написания скриптов:

<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 можно удалить лишние теги.

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

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

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

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

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

Метки:

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

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

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

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

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

Я не робот.

Spam Protection by WP-SpamFree