Від автора: use – інструмент клонування SVG елементів. З його допомогою можна дублювати існуючі і задані елементи. Також даний інструмент надає можливість змінювати створені копії. Use – легкий спосіб полегшити ваш SVG код, використовуючи при цьому кращі DRY практики («Не повторюватися»).
Тег
Є SVG елемент з id:
З допомогою use цей елемент можна скопіювати:
Зверніть увагу на атрибут посилання xlink в коді вище. У кореневому SVG елементі необхідно оголосити простір імен xlink.
Нова копія успадкує всі якості оригіналу, за замовчуванням вона буде відрізнити від цього елемента. Щоб дублікат став унікальним, в нього необхідно внести зміни. Однак зміни потрібно вносити не оригінал, інакше нічого не спрацює, виникне протиріччя:
Дублікат буде мати червоний колір, а не синій, так як атрибут fill спочатку заданий у вихідному елементі. Але копію цілком можна додати новий атрибут, якого немає в оригіналі:
Дублікат так і залишиться червоного кольору, але у нього з’явиться чорна окантовка.
Робота з
Для вирішення вищеописаної проблеми вихідний елемент часто загортається в тег . У такому разі всі атрибути оригіналу не будуть передаватися на його клон.
Все, що потрапило в тег defs не буде намальовано в SVG; задані елементи будуть показуватися тільки через посилання. Тепер додамо клону атрибути, яких немає в оригіналу:
Так ми створили перший видимий коло. Радіус кола дорівнює 5, що успадковано від оригіналу, але в той же час у нього своя позиція і колір. Можна створити ще один дублікат, просто скопіювавши тег use:
Обидва кола з радіусом 5, який отриманий (і не змінюється) від оригіналу, але у кожного кола своя унікальна позиція і колір. Якщо в оригіналі задати позицію:
Для зміни позиції клону можна скористатися атрибутом transform:
Інші предзаданные атрибути в клоні можна змінити схожим чином: заздалегідь заданий атрибут fill можна змінити з допомогою opacity або blend-mode, наприклад. Всі зміни в оригіналі позначаться на копіях. Через посилання можна клонувати не тільки елементи, також можна створювати цілі групи елементів. Групі необхідно присвоїти ідентифікатор, після чого її можна копіювати як завгодно багато разів:
Для простоти я використовував елементи circle, проте в основу можна покласти майже будь-яку векторну графіку. use посилання також можна генерувати за допомогою JavaScript, про що я розповім вже в наступній статті.
