defs
SVG 允许我们定义以后需要重复使用的图形元素。建议把所有需要再次使用的引用元素定义在defs
元素里面。这样做可以增加 SVG 内容的易读性和无障碍。在defs
元素中定义的图形元素不会直接呈现。你可以在你的视口的任意地方利用 <use>
元素呈现这些元素。
用法
类别 | 容器元素、结构元素 |
---|---|
允许的内容 | 任意数量、任意顺序的下列元素: 动画元素 描述性元素 形状元素 结构化元素 渐变元素 <a> 、<altGlyphDef> 、<clipPath> 、<color-profile> 、<cursor> 、<filter> 、<font> 、<font-face> 、<foreignObject> 、<image> 、<marker> 、<mask> 、<pattern> 、<script> 、<style> 、<switch> 、<text> 、<view> |
示例
<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
接口。
浏览器兼容性
BCD tables only load in the browser