<use>
Элемент <use> извлекает узлы из документа SVG и дублирует их в другом месте. Эффект аналогичен глубокому клонированию узлов в скрытом DOM, а затем вставке в местоположение элемента use, как при клонировании элементов шаблонов.
Пример
Следующий пример демонстрирует использование элемента 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>
Атрибуты
href-
URL элемента/фрагмента, который нужно дублировать. Подробности о распространённых ошибках см. в разделе Примечания по использованию.
Тип значения:<URL>; Значение по умолчанию: отсутствует; Анимируемо: да -
xlink:hrefУстаревший -
Ссылка
<IRI>на элемент/фрагмент, который нужно дублировать. Если присутствуют обаhrefиxlink:href, используется значениеhref.
Тип значения:<IRI>; Значение по умолчанию: отсутствует; Анимируемо: да x-
Координата x дополнительного смещения, применяемого к элементу
<use>.
Тип значения:<coordinate>; Значение по умолчанию:0; Анимируемо: да y-
Координата y дополнительного смещения, применяемого к элементу
<use>.
Тип значения:<coordinate>; Значение по умолчанию:0; Анимируемо: да width-
Ширина элемента use.
Тип значения:<length>; Значение по умолчанию:0; Анимируемо: да height-
Высота элемента use.
Тип значения:<length>; Значение по умолчанию:0; Анимируемо: да
Примечание: width, и height не влияют на элементы use, если у ссылаемого элемента нет viewbox. То есть, они действуют только когда use ссылается на элемент svg или symbol.
Примечание: Начиная с SVG2, x, y, width, и height являются свойствами геометрии, что означает, что эти атрибуты также могут быть использованы в качестве свойств CSS для данного элемента.
Примечания по использованию
Большинство атрибутов элемента use игнорируются, если соответствующий атрибут уже определён для элемента, на который ссылается use. (Это отличается от того, как атрибуты стилей CSS переопределяют те, что установлены «раньше» в каскаде). Только атрибуты x, y, width, height и href элемента use могут иметь некоторый эффект (описанный ниже), если соответствующий атрибут уже определён в ссылаемом элементе. Однако любые другие атрибуты, не установленные в ссылаемом элементе, будут применены к элементу use.
Так как клонированные узлы не видны, необходимо быть внимательным при использовании CSS для стилизации элемента use и его клонированных потомков. Свойства CSS не гарантированно наследуются клонированным DOM, если вы не запрашиваете их явно с помощью наследования CSS.
По соображениям безопасности браузеры могут применять политику «одинакового происхождения» к элементам use и могут отказаться загружать URL из другого источника в атрибуте href. В настоящее время нет определённого способа установить политику безопасности для элементов use.
Предупреждение: Загрузка ресурсов с помощью URI данных в атрибуте href устарела по соображениям безопасности. Это касается <use href="data:... и также при установке href с помощью метода set или setAttribute. См. «Загрузка из URI data:` в таблице совместимости с браузерами для проверки поддержки в разных версиях браузеров.
Предупреждение: Начиная с SVG 2, атрибут xlink:href устарел в пользу href. См. страницу xlink:href для получения дополнительной информации.
Контекст использования
| Категории | Элемент графики, Элемент графической ссылки, Структурный элемент |
|---|---|
| Разрешённое содержимое | Любое количество следующих элементов в любом порядке: Элементы анимации Описательные элементы |
Спецификации
| Спецификация |
|---|
| Scalable Vector Graphics (SVG) 2 # UseElement |
Совместимость с браузерами
| Рабочий стол | Мобильный | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Opera | Safari | Chrome Android | Firefox для Android | Opera Android | Safari на IOS | Samsung Internet | WebView Android | |
use |
1 | 12 | 1.5До версии 56 Firefox не полностью соблюдает правилаuse каскадирования (см. ошибку 265894). Исправление описано на StackOverflow Эмили Беллей-Ройдс. |
11.5 | 3 | 18 | 4До версии 56 Firefox не полностью соблюдает правилаuse каскадирования (см. ошибку 265894). Исправление описано на StackOverflow Эмили Беллей-Ройдс. |
11.5 | 2 | 1.0 | 4 |
data_uri |
22–120 | ≤18 | 4–122 | 11.5 | Нет | 25–120 | 4–122 | 11.5 | Нет | 1.5–25.0 | 4 |
external_uri |
22 | 13 | 4 | 11.5 | 7 | 25 | 4 | 11.5 | 7 | 1.5 | 4.4 |
height |
1 | 12 | 1.5 | 15 | 3 | 18 | 4 | 14 | 2 | 1.0 | 4.4 |
href |
50 | 12 | 1.5 | 37 | 12.1 | 50 | 4 | 37 | 12.2 | 5.0 | 50 |
systemLanguage |
1 | 12 | 12 | 11.5 | 3 | 18 | 14 | 11.5 | 2 | 1.0 | 4 |
width |
1 | 12 | 1.5 | 15 | 3 | 18 | 4 | 14 | 2 | 1.0 | 4.4 |
x |
1 | 12 | 1.5 | 15 | 3 | 18 | 4 | 14 | 2 | 1.0 | 4.4 |
xlink_href |
1 | 12 | 1.5 | 15 | 3 | 18 | 4 | 14 | 2 | 1.0 | 4.4 |
y |
1 | 12 | 1.5 | 15 | 3 | 18 | 4 | 14 | 2 | 1.0 | 4.4 |
© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/SVG/Element/use
