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

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

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

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

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

Спецификации

Спецификация Статус Комментарий
Scalable Vector Graphics (SVG) 2
Определение '<defs>' в этой спецификации.
Кандидат в рекомендации Без изменений
Scalable Vector Graphics (SVG) 1.1 (Second Edition)
Определение '<defs>' в этой спецификации.
Рекомендация Первоначальное определение

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

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

Feature Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari
Basic support 1.0 (Да) 1.5 (1.8) 9.0 8.0 3.0.4
Feature Android Edge Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support 3.0 (Да) 1.0 (1.8) Нет (Да) 3.0.4

Таблица взята из этого источника.

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

Метки документа и участники

 Внесли вклад в эту страницу: coshturnina
 Обновлялась последний раз: coshturnina,