<defs>

Baseline 已广泛支持

此特性已相当成熟，可在许多设备和浏览器版本上使用。自 ⁨2015 年 7 月⁩以来，各浏览器均已提供此特性。

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

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

使用语境

分类	容器元素，结构元素
允许内容	可包含任意数量、任意顺序的下列元素动画元素描述性元素形状元素结构元素渐变元素 `<a>`, `<clipPath>`, `<filter>`, `<foreignObject>`, `<image>`, `<marker>`, `<mask>`, `<pattern>`, `<script>`, `<style>`, `<switch>`, `<text>`, `<view>`

属性

此元素仅包含全局属性。

DOM 接口

此元素实现了 SVGDefsElement 接口。

示例

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>

规范

规范
Scalable Vector Graphics (SVG) 2 # 头部

浏览器兼容性

帮助改进 MDN

了解如何贡献

此页面最后修改于 ⁨2025年6月6日⁩，由 MDN 贡献者修改。

在 GitHub 上查看此页面 • 报告此内容的问题