Клонирование SVG элементов с помощью Use

Клонирование SVG элементов с помощью Use

От автора: use – инструмент клонирования SVG элементов. С его помощью можно дублировать существующие и заданные элементы. Также данный инструмент предоставляет возможность изменять созданные копии. Use – легкий способ облегчить ваш SVG код, используя при этом лучшие DRY практики («Не повторяться»).

Тег <use>

Есть SVG элемент с id:

<circle cx="50" cy="50" r="10" fill="red" id="primcirc" />

С помощью use данный элемент можно скопировать:

<use xlink:href="#primcirc" />

Обратите внимание на атрибут ссылки xlink в коде выше. В корневом SVG элементе необходимо объявить пространство имен xlink.

Новая копия унаследует все качества оригинала, по умолчанию она будет неотличима от настоящего элемента. Чтобы дубликат стал уникальным, в него необходимо внести изменения. Однако изменения нужно вносить не в оригинал, иначе ничего не сработает, возникнет противоречие:

<use xlink:href="#primcirc" fill="blue" />

Дубликат будет иметь красный цвет, а не синий, так как атрибут fill изначально задан в исходном элементе. Но в копию вполне можно добавить новый атрибут, которого нет в оригинале:

<use xlink:href="#primcirc" stroke="black" />

Дубликат так и останется красного цвета, но у него появится черная обводка.

Работа с <defs>

Для решения вышеописанной проблемы исходный элемент зачастую заворачивается в тег <defs>. В таком случае все атрибуты оригинала не будут передаваться на его клон.

<defs>
    <circle r="10" id="primcirc" />
</defs>

Все, что попало в тег defs не будет отрисовано в SVG; заданные элементы будут показываться только через ссылки. Теперь добавим клону атрибуты, которых нет у оригинала:

<use xlink:href="#primcirc" cx="50" cy="50" fill="red" />

Так мы создали первый видимый круг. Радиус круга равен 5, что унаследовано от оригинала, но в то же время у него своя позиция и цвет. Можно создать еще один дубликат, просто скопировав тег use:

<use xlink:href="#primcirc" cx="80" cy="80" fill="yellow" />

Оба круга с радиусом 5, который получен (и не меняется) от оригинала, но у каждого круга своя уникальная позиция и цвет. Если в оригинале задать позицию:

<defs>
    <circle r="10" cx="50" cy="50" id="primcirc" />
</defs>

То для изменения позиции клона можно воспользоваться атрибутом transform:

<use xlink:href="#primcirc" fill="yellow" transform="translate(50 50)" />

Другие предзаданные атрибуты в клоне можно сменить похожим образом: заранее заданный атрибут fill можно изменить с помощью opacity или blend-mode, к примеру. Все изменения в оригинале отразятся на копиях. Через ссылки можно клонировать не только элементы, также можно создавать целые группы элементов. Группе необходимо присвоить идентификатор, после чего ее можно копировать сколь угодно много раз:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 100 100">
<defs>
    <g id="primgroup">
        <circle cx="50" cy="50" r="10" fill="red" />
        <circle cx="70" cy="70" r="10" fill="blue" />
    </g>
</defs>
    <use xlink:href="#primgroup" />
</svg>

Для простоты я использовал элементы circle, однако в основу можно положить почти любую векторную графику. use ссылки также можно генерировать с помощью JavaScript, о чем я расскажу уже в следующей статье.

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

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

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки:

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

Комментарии 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