<use>

Пример

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

<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 и href элемента use будут переопределять те, что были заданы у элемента, на который use ссылается. Однако к элементу use будут применены любые другие атрибуты, не заданные у элемента, на который use ссылается.

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

По соображениям безопасности, браузеры могут применять правило ограничения домена для элементов use и могут отказаться загружать URL другого источника в атрибуте 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; Анимируется: да

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

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

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