<defs>

<defs> 元素用于存储稍后将使用的图形对象。在 <defs> 元素内部创建的对象不会直接呈现。要显示它们，您必须引用它们（例如，使用 <use> 元素）。

可以从任何位置引用图形对象，但是，在 <defs> 元素内部定义这些对象可以提高 SVG 内容的可理解性，并有利于文档的整体可访问性。

示例

html,
body,
svg {
  height: 100%;
}

html

<svg viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg">
  <!-- Some graphical objects to use -->
  <defs>
    <circle id="myCircle" cx="0" cy="0" r="5" />

    <linearGradient id="myGradient" gradientTransform="rotate(90)">
      <stop offset="20%" stop-color="gold" />
      <stop offset="90%" stop-color="red" />
    </linearGradient>
  </defs>

  <!-- using my graphical objects -->
  <use x="5" y="5" href="#myCircle" fill="url('#myGradient')" />
</svg>

使用场景

类别	容器元素、结构元素
允许的内容	任意数量的以下元素，按任意顺序动画元素描述性元素形状元素结构元素渐变元素 `<a>`、`<clipPath>`、`<cursor>`、`<filter>`、`<font>`、`<font-face>`、`<foreignObject>`、`<image>`、`<marker>`、`<mask>`、`<pattern>`、`<script>`、`<style>`、`<switch>`、`<text>`、`<view>`

规范

规范
可缩放矢量图形 (SVG) 2 # 头部

浏览器兼容性

BCD 表格仅在浏览器中加载