<defs>

SVG позволяет задавать графические объекты для последующего использования. Рекомендуется там, где это возможно, объявлять подобные элементы внутри элемента <defs>. Объекты, созданные внутри элемента <defs> не отображаются немедленно; рассматривайте их, как шаблоны или макросы, созданные для будущего использования.

Создание подобных элементов внутри элемента <defs> способствует лучшему пониманию содержимого SVG и поэтому способствует также доступности. Вы можете использовать элемент <use>, чтобы отрисовать данные элементы в любом месте области просмотра.

<defs> также можно использовать для создания градиентов; в качестве иллюстрации можно посмотреть пример для атрибута x1 (en-US).

Контекст использования

КатегорииКонтейнеры, Структурный элемент
Разрешённый контентЛюбое количество следующих элементов, в любом порядке:
Элементы анимации
Элементы описания
Фигуры
Структурные элементы
Градиенты
<a>, <altGlyphDef> (en-US), <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).

Пример

<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) 1.1 (Second Edition) (SVG)
# Head

Браузерная совместимость

BCD tables only load in the browser

 

Связанные темы