<use>
Элемент <use>
берёт элементы из SVG-документа и дублирует их где-то ещё.
Пример
<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
.
Предупреждение: Начиная с SVG 2, атрибут xlink:href
получил статус "Устарело" в пользу href
. Дополнительную информацию ищите на странице xlink:href
. Тем не менее, на практике всё ещё может быть потребность в использовании xlink:href
для кроссбраузерной совместимости (смотрите таблицу совместимости ниже).
Атрибуты
href
-
Ссылка на элемент/фрагмент, который нужно продублировать. Тип значения: <URL> ; Значение по умолчанию:
none
; Анимируется: да xlink:href
-
<IRI>-ссылка на элемент/фрагмент, который нужно продублировать. Тип значения: <IRI> ; Значение по умолчанию:
SVG2: Эта возможность была удалена из веб-стандартов. Хотя некоторые браузеры по-прежнему могут поддерживать её, она находится в процессе удаления. Не используйте её ни в старых, ни в новых проектах. Страницы или веб-приложения, использующие её, могут в любой момент сломаться.
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-свойств для этого элемента.
Примечание по использованию
Категории | Графические элементы, Элементы графики, Структурный элемент |
---|---|
Разрешённый контент | Любое количество следующих элементов, в любом порядке: Элементы анимации Элементы описания |
Спецификации
Specification |
---|
Scalable Vector Graphics (SVG) 2 # UseElement |
Совместимость с браузерами
BCD tables only load in the browser