От автора: use – инструмент клонирования SVG элементов. С его помощью можно дублировать существующие и заданные элементы. Также данный инструмент предоставляет возможность изменять созданные копии. Use – легкий способ облегчить ваш SVG код, используя при этом лучшие DRY практики («Не повторяться»).
Тег <use>
Есть SVG элемент с id:
1 |
<circle cx="50" cy="50" r="10" fill="red" id="primcirc" /> |
С помощью use данный элемент можно скопировать:
1 |
<use xlink:href="#primcirc" /> |
Обратите внимание на атрибут ссылки xlink в коде выше. В корневом SVG элементе необходимо объявить пространство имен xlink.
Новая копия унаследует все качества оригинала, по умолчанию она будет неотличима от настоящего элемента. Чтобы дубликат стал уникальным, в него необходимо внести изменения. Однако изменения нужно вносить не в оригинал, иначе ничего не сработает, возникнет противоречие:
1 |
<use xlink:href="#primcirc" fill="blue" /> |
Дубликат будет иметь красный цвет, а не синий, так как атрибут fill изначально задан в исходном элементе. Но в копию вполне можно добавить новый атрибут, которого нет в оригинале:
1 |
<use xlink:href="#primcirc" stroke="black" /> |
Дубликат так и останется красного цвета, но у него появится черная обводка.
Работа с <defs>
Для решения вышеописанной проблемы исходный элемент зачастую заворачивается в тег <defs>. В таком случае все атрибуты оригинала не будут передаваться на его клон.
1 2 3 |
<defs> <circle r="10" id="primcirc" /> </defs> |
Все, что попало в тег defs не будет отрисовано в SVG; заданные элементы будут показываться только через ссылки. Теперь добавим клону атрибуты, которых нет у оригинала:
1 |
<use xlink:href="#primcirc" cx="50" cy="50" fill="red" /> |
Так мы создали первый видимый круг. Радиус круга равен 5, что унаследовано от оригинала, но в то же время у него своя позиция и цвет. Можно создать еще один дубликат, просто скопировав тег use:
1 |
<use xlink:href="#primcirc" cx="80" cy="80" fill="yellow" /> |
Оба круга с радиусом 5, который получен (и не меняется) от оригинала, но у каждого круга своя уникальная позиция и цвет. Если в оригинале задать позицию:
1 2 3 |
<defs> <circle r="10" cx="50" cy="50" id="primcirc" /> </defs> |
То для изменения позиции клона можно воспользоваться атрибутом transform:
1 |
<use xlink:href="#primcirc" fill="yellow" transform="translate(50 50)" /> |
Другие предзаданные атрибуты в клоне можно сменить похожим образом: заранее заданный атрибут fill можно изменить с помощью opacity или blend-mode, к примеру. Все изменения в оригинале отразятся на копиях. Через ссылки можно клонировать не только элементы, также можно создавать целые группы элементов. Группе необходимо присвоить идентификатор, после чего ее можно копировать сколь угодно много раз:
1 2 3 4 5 6 7 8 9 |
<svg version="1.1" xmlns="//www.w3.org/2000/svg" xmlns:xlink="//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, о чем я расскажу уже в следующей статье.
Источник: //thenewcode.com/
Редакция: Команда webformyself.