Клонирование 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.

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

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

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

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

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

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

</defs>

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

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

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

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

То для изменения позиции клона можно воспользоваться атрибутом transform:
view source
print
?
1.
bc.

Другие предзаданные атрибуты в клоне можно сменить похожим образом: заранее заданный атрибут fill можно изменить с помощью opacity или blend-mode, к примеру. Все изменения в оригинале отразятся на копиях. Через ссылки можно клонировать не только элементы, также можно создавать целые группы элементов. Группе необходимо присвоить идентификатор, после чего ее можно копировать сколь угодно много раз:
view source
print
?
01.
bc.
02.
bc.
03.
bc.
04.
bc.
05.
bc.
06.
bc.
07.
bc.
08.
bc.
09.
bc.

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

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