defs

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

SVG 允许我们定义以后需要重复使用的图形元素。建议把所有需要再次使用的引用元素定义在defs元素里面。这样做可以增加 SVG 内容的易读性和无障碍。在defs元素中定义的图形元素不会直接呈现。你可以在你的视口的任意地方利用 <use>元素呈现这些元素。

使用上下文

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

示例

xml
<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>

属性

全局属性

专有属性

没有专有属性。

DOM 接口

这个元素实现了 SVGDefsElement 接口。

浏览器兼容性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
defs
systemLanguage

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

参见