<use>

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

Контекст использования

Атрибуты

href

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

xlink:href Устарело

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

Предупреждение: начиная с SVG 2 атрибут xlink:href считается устаревшим и заменён атрибутом href. Подробнее см. на странице xlink:href.

x

Координата x дополнительного конечного преобразования смещения, применённого к элементу <use>.
Тип значения: <coordinate>; Значение по умолчанию: 0; Анимируемый: да

y

Координата y дополнительного конечного преобразования смещения, применённого к элементу <use>.
Тип значения: <coordinate>; Значение по умолчанию: 0; Анимируемый: да

width

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

height

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

Интерфейс DOM

Этот элемент реализует интерфейс SVGUseElement.

Пример

В следующем примере показано, как использовать элемент <use> для рисования круга с другим цветом заливки и обводки. В последнем круге stroke="red" будет проигнорирован, поскольку для myCircle уже задана обводка.

<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" />
</svg>

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

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

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

В целях безопасности браузеры могут применять политику одного источника к элементам <use> и отказываться загружать междоменные URL в атрибуте href. В настоящее время не существует определённого способа задать политику междоменных запросов для элементов <use>.

Загрузка ресурсов из внешних файлов с помощью <use>

Можно загружать узлы из внешнего SVG-файла с помощью элемента <use>, указав путь к файлу, за которым следует фрагмент URL, ссылающийся на id загружаемого узла:

<svg>
  <use href="../assets/my-svg.svg#my-fragment"></use>
</svg>

Раньше фрагмент URL был обязателен, даже если требовалось загрузить весь SVG-документ. В таком случае id добавлялся к корневому элементу SVG:

<svg xmlns="http://www.w3.org/2000/svg" id="my-fragment">
  <circle cx="150" cy="100" r="80" fill="green" />
</svg>

Однако современные реализации были обновлены: теперь для загрузки всего внешнего документа можно указать ссылку без фрагмента URL (и id больше не требуется в корневом элементе SVG-документа):

<svg>
  <use href="../assets/my-svg.svg"></use>
</svg>

Информацию о поддержке браузерами см. в таблице Совместимость с браузерами.

Загрузка ресурсов из URI данных с помощью <use>

Загрузка ресурсов с помощью URI данных в атрибуте href считается устаревшей по соображениям безопасности. Это относится к <use href="data:...", а также к установке href с помощью метода set или setAttribute.

Информацию о поддержке браузерами см. в таблице Совместимость с браузерами.

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

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