<use>

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since июль 2015 г..

* Some parts of this feature may have varying levels of support.

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

Пример

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

html

<svg viewBox="0 0 30 10" xmlns="http://www.w3.org/2000/svg">  <circle 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 иhref элементаuse будут переопределять те, что были заданы у элемента, на которыйuse ссылается. Однако к элементуuse будут применены любые другие атрибуты, не заданные у элемента, на которыйuse ссылается.

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

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

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

Атрибуты

href: Ссылка на элемент/фрагмент, который нужно продублировать.Тип значения:<URL> ;Значение по умолчанию:none;Анимируется:да
xlink:href: Устарело: Эта возможность была удалена из веб-стандартов. Хотя некоторые браузеры по-прежнему могут поддерживать её, она находится в процессе удаления. Не используйте её ни в старых, ни в новых проектах. Страницы или веб-приложения, использующие её, могут в любой момент сломаться.
<IRI>-ссылка на элемент/фрагмент, который нужно продублировать.Тип значения:<IRI> ;Значение по умолчанию:none;Анимируется:да
x: Координата "x" элементаuse.Тип значения:<coordinate> ;Значение по умолчанию:0;Анимируется:да
y: Координата "y" элементаuse.Тип значения:<coordinate> ;Значение по умолчанию:0;Анимируется:да
width: Ширина элементаuse.Тип значения:<length> ;Значение по умолчанию:0;Анимируется:да
height: Высота элементаuse.Тип значения:<length> ;Значение по умолчанию:0;Анимируется:да

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

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

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