<use>
=====

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

Пример
------
```

html,
body,
svg {
  height: 100%;
}
```



```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 Атрибуты
`xlink:href (en-US)`, `xlink:title (en-US)`
Примечание по использованию
---------------------------

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

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

| Specification |
| --- |
| Scalable Vector Graphics (SVG) 2 # UseElement |

Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.