<defs>

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>' в этой спецификации.
Рекомендация Первоначальное определение

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

Update compatibility data on GitHub
КомпьютерыМобильные
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome для AndroidFirefox для AndroidOpera для AndroidSafari on iOSSamsung Internet
defsChrome Полная поддержка 1Edge Полная поддержка ДаFirefox Полная поддержка 1.5IE Полная поддержка 9Opera Полная поддержка 8Safari Полная поддержка 3.1WebView Android Полная поддержка 3Chrome Android Полная поддержка 18Firefox Android Полная поддержка 4Opera Android Полная поддержка ДаSafari iOS Полная поддержка 3.1Samsung Internet Android Полная поддержка 1.0

Легенда

Полная поддержка  
Полная поддержка

 

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