<defs>
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