<defs>
SVG позволяет задавать графические объекты для последующего использования. Рекомендуется там, где это возможно, объявлять подобные элементы внутри элемента <defs>
. Объекты, созданные внутри элемента <defs>
не отображаются немедленно; рассматривайте их, как шаблоны или макросы, созданные для будущего использования.
Создание подобных элементов внутри элемента <defs>
способствует лучшему пониманию содержимого SVG и поэтому способствует также доступности. Вы можете использовать элемент <use>
, чтобы отрисовать данные элементы в любом месте области просмотра.
<defs>
также можно использовать для создания градиентов; в качестве иллюстрации можно посмотреть пример для атрибута x1 (en-US)
.
Контекст использования
Категории | Контейнеры, Структурный элемент |
---|---|
Разрешённый контент | Любое количество следующих элементов, в любом порядке: Элементы анимации Элементы описания Фигуры Структурные элементы Градиенты <a> , <clipPath> (en-US), <color-profile> , <cursor> (en-US), <filter> (en-US), <font> (en-US), <font-face> (en-US), <foreignObject> , <image> , <marker> (en-US), <mask> (en-US), <pattern> , <script> (en-US), <style> (en-US), <switch> (en-US), <text> , <view> (en-US) |
Атрибуты
Глобальные атрибуты
Специфичные атрибуты
Нет
Интерфейс DOM
Элемент реализует интерфейс SVGDefsElement
(en-US).
Пример
xml
<svg width="80px" height="30px" viewBox="0 0 80 30"
xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="Gradient01">
<stop offset="20%" stop-color="#39F" />
<stop offset="90%" stop-color="#F3F" />
</linearGradient>
</defs>
<rect x="10" y="10" width="60" height="10"
fill="url(#Gradient01)" />
</svg>
Спецификации
Specification |
---|
Scalable Vector Graphics (SVG) 2 # Head |
Браузерная совместимость
BCD tables only load in the browser