<use>

Элемент <use> берёт элементы из SVG-документа и дублирует их где-то ещё.

html

<svg viewBox="0 0 30 10" xmlns="http://www.w3.org/2000/svg">
  <circle id="myCircle" cx="5" cy="5" r="4" stroke="blue"/>
  <use href="#myCircle" x="10" fill="blue"/>
  <use href="#myCircle" x="20" fill="white" stroke="red"/>
  <!--
  В данном случае атрибут stroke="red" будет игнорироваться, так как
  ранее он был задан непосредственно для фигуры круга с id "myCircle".
  Большинство атрибутов (кроме x, y, width, height и (xlink:)href) не
  переопределяют значения, заданные у предка.
  Вот почему круги имеют разные координаты "x", но одинаковое значение "stroke".
  -->
</svg>

Эффект такой же, как если бы элементы были полностью склонированы в DOM, а затем расположены в месте, где находится элемент use, подобно элементам <template> в HTML 5.

Большинство атрибутов use не переопределяют те, что уже заданы у элемента, на который use ссылается. (Это отличается от того, как атрибуты CSS-стилей, переопределяют те, что были заданы раньше в каскаде). Только атрибуты x, y, width, height (en-US) и href (en-US) элемента use будут переопределять те, что были заданы у элемента, на который use ссылается. Однако к элементу use будут применены любые другие атрибуты, не заданные у элемента, на который use ссылается.

Поскольку клонированные элементы не отображаются, нужно соблюдать осторожность при использовании CSS для стилизации элемента use и его клонированных потомков. Нет гарантии, что CSS-свойства будут унаследованы клонированным DOM, пока вы явно не зададите им использование CSS-наследования.

По соображениям безопасности, браузеры могут применять правило ограничения домена для элементов use и могут отказаться загружать URL другого источника в атрибуте href (en-US).

Предупреждение: Начиная с SVG 2, атрибут xlink:href (en-US) получил статус "Устарело" в пользу href (en-US). Дополнительную информацию ищите на странице xlink:href (en-US). Тем не менее, на практике всё ещё может быть потребность в использовании xlink:href (en-US) для кроссбраузерной совместимости (смотрите таблицу совместимости ниже).

Атрибуты

href (en-US)

Ссылка на элемент/фрагмент, который нужно продублировать. Тип значения: <URL> ; Значение по умолчанию: none; Анимируется: да

xlink:href (en-US)

SVG2: Эта возможность была удалена из веб-стандартов. Хотя некоторые браузеры по-прежнему могут поддерживать её, она находится в процессе удаления. Не используйте её ни в старых, ни в новых проектах. Страницы или веб-приложения, использующие её, могут в любой момент сломаться.

<IRI>-ссылка на элемент/фрагмент, который нужно продублировать. Тип значения: <IRI> ; Значение по умолчанию: none; Анимируется: да

x

Координата "x" элемента use. Тип значения: <coordinate> ; Значение по умолчанию: 0; Анимируется: да

y

Координата "y" элемента use. Тип значения: <coordinate> ; Значение по умолчанию: 0; Анимируется: да

width

Ширина элемента use. Тип значения: <length> ; Значение по умолчанию: 0; Анимируется: да

height (en-US)

Высота элемента use. Тип значения: <length> ; Значение по умолчанию: 0; Анимируется: да

Примечание: Начиная с SVG2, x, y, width, и height являются Свойствами Геометрии, то есть эти атрибуты также могут быть использованы в качестве CSS-свойств для этого элемента.

Глобальные атрибуты

Core Attributes

Most notably: id, tabindex (en-US)

Styling Attributes
class, style (en-US)
Conditional Processing Attributes

Most notably: requiredExtensions, systemLanguage (en-US)

Атрибуты Событий

Global event attributes, Graphical event attributes

Presentation Attributes

Most notably: clip-path (en-US), clip-rule (en-US), color (en-US), color-interpolation (en-US), color-rendering, cursor (en-US), display (en-US), fill, fill-opacity, fill-rule, filter (en-US), mask (en-US), opacity (en-US), pointer-events (en-US), shape-rendering, stroke, stroke-dasharray (en-US), stroke-dashoffset, stroke-linecap, stroke-linejoin (en-US), stroke-miterlimit (en-US), stroke-opacity (en-US), stroke-width, transform, vector-effect (en-US), visibility (en-US)

ARIA-Атрибуты

aria-activedescendant, aria-atomic, aria-autocomplete, aria-busy, aria-checked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-readonly, aria-relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role

xlink:href (en-US), xlink:title (en-US)

Примечание по использованию

КатегорииГрафические элементы, Элементы отсылки к графике, Структурный элемент
Разрешённый контентЛюбое количество следующих элементов, в любом порядке:
Элементы анимации
Элементы описания

Спецификации

Specification Status Comment
Scalable Vector Graphics (SVG) 2
Определение '<use>' в этой спецификации.		 Кандидат в рекомендации
Scalable Vector Graphics (SVG) 1.1 (Second Edition)
Определение '<use>' в этой спецификации.		 Рекомендация Initial definition

Браузерная совместимость

BCD tables only load in the browser