非常教程

SVG参考手册

分类 | Elements

defs

SVG允许定义图形对象以备后用。建议尽可能在元素内部定义引用的<defs>元素。在<defs>元素中定义这些元素可以提高SVG内容的可理解性,从而提高可访问性。元素中定义的图形元素<defs>不会被直接渲染。您可以使用<use>元素在视口中的任何位置呈现这些元素。

用法上下文

分类

集装箱元素,结构元素

允许的内容

任意数量的下列元素,以任何顺序排列:动画元素描述元素图形元素结构元素渐变元素<a>, <altGlyphDef>, <clipPath>, <color-profile>, <cursor>, <filter>, <font>, <font-face>, <foreignObject>, <image>, <marker>, <mask>, <pattern>, <script>, <style>, <switch>, <text>, <view>

属性

全局属性

  • Conditional processing attributes
  • Core attributes
  • Graphical event attributes
  • Presentation attributes
  • class
  • style
  • externalResourcesRequired
  • transform

具体属性

没有

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>

产品规格

Specification

Status

Comment

Scalable Vector Graphics (SVG) 2The definition of '<defs>' in that specification.

Candidate Recommendation

No change

Scalable Vector Graphics (SVG) 1.1 (Second Edition)The definition of '<defs>' in that specification.

Recommendation

Initial definition

浏览器兼容性

Feature

Chrome

Edge

Firefox (Gecko)

Internet Explorer

Opera

Safari

Basic support

1.0

(Yes)

1.5 (1.8)

9.0

8.0

3.0.4

Feature

Android

Edge

Firefox Mobile (Gecko)

IE Phone

Opera Mobile

Safari Mobile

Basic support

3.0

(Yes)

1.0 (1.8)

No support

(Yes)

3.0.4

SVG

可缩放矢量图形是基于可扩展标记语言(标准通用标记语言的子集),用于描述二维矢量图形的一种图形格式。它由万维网联盟制定,是一个开放标准。