非常教程

SVG参考手册

分类 | Elements

lineargradient

<linearGradient>SVG元素允许作者定义线性梯度,以填充或中风图形元素。

用法上下文

分类

渐变元素

允许的内容

以任意顺序包含任意数量的以下元素:描述性元素<animate>,<animateTransform>,<set>,<stop>

属性

全局属性

  • Core attributes
  • Presentation attributes
  • Xlink attributes
  • class
  • style
  • externalResourcesRequired

具体属性

  • gradientUnits
  • gradientTransform
  • x1
  • y1
  • x2
  • y2
  • spreadMethod
  • xlink:href

DOM接口

这个元素实现了SVGLinearGradientElement接口。

例子

<svg width="120" height="120" xmlns="http://www.w3.org/2000/svg">
    <defs>
        <linearGradient id="MyGradient">
            <stop offset="5%"  stop-color="green"/>
            <stop offset="95%" stop-color="gold"/>
        </linearGradient>
    </defs>

    <rect fill="url(#MyGradient)"
          x="10" y="10" width="100" height="100"/>
</svg>

Screenshot

Live sample

产品规格

Specification

Status

Comment

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

Candidate Recommendation

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

Recommendation

Initial definition

浏览器兼容性

Feature

Chrome

Edge

Firefox (Gecko)

IE

Opera

Safari

Basic support

1.0

(Yes)

1.5 (1.8)

9.0

9.0

3.0.41

Feature

Android

Edge

Firefox Mobile (Gecko)

IE Mobile

Opera Mobile

Safari Mobile

Basic support

3.0

(Yes)

1.0 (1.8)

No support

(Yes)

3.0.41

SVG

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