<defs>
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.
SVG позволяет задавать графические объекты для последующего использования. Рекомендуется там, где это возможно, объявлять подобные элементы внутри элемента <defs>
. Объекты, созданные внутри элемента <defs>
не отображаются немедленно; рассматривайте их, как шаблоны или макросы, созданные для будущего использования.
Создание подобных элементов внутри элемента <defs>
способствует лучшему пониманию содержимого SVG и поэтому способствует также доступности. Вы можете использовать элемент <use>
, чтобы отрисовать данные элементы в любом месте области просмотра.
<defs>
также можно использовать для создания градиентов; в качестве иллюстрации можно посмотреть пример для атрибута x1
.
Контекст использования
Категории | Элемент-контейнер, Структурный элемент |
---|---|
Разрешённый контент | Любое количество следующих элементов, в любом порядке: Элементы анимации Элементы описания Элементы фигуры Структурные элементы Элементы градиента <a> , <clipPath> , <cursor> , <filter> , <font> , <font-face> , <foreignObject> , <image> , <marker> , <mask> , <pattern> , <script> , <style> , <switch> , <text> , <view> |
Интерфейс DOM
Элемент реализует интерфейс SVGDefsElement
.
Пример
<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