linearGradient - SVG 编辑

linearGradient元素用来定义线性渐变，用于图形元素的填充或描边。

用法

类别	渐变元素
允许的内容物	任意数量、任意排序的下列元素： 描述性元素 <animate>, <animateTransform>, <set>, <stop>

示例

<svg width="120" height="120"  viewBox="0 0 120 120"
     xmlns="http://www.w3.org/2000/svg" version="1.1"
     xmlns:xlink="http://www.w3.org/1999/xlink" >

    <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

属性

Global 属性

• 核心属性 »
• 外观属性 »
• Xlink属性 »
• class
• style
• externalResourcesRequired

专有属性

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

DOM 接口

该元素实现了SVGLinearGradientElement接口。

浏览器兼容性

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

• Desktop
• Mobile

Feature	Chrome	Firefox (Gecko)	IE	Opera	Safari
Basic support	1.0	1.5 (1.8)	9.0	9.0	3.0.4

Feature	Android	Firefox Mobile (Gecko)	IE Mobile	Opera Mobile	Safari Mobile
Basic support	3.0	1.0 (1.8)	未实现	(Yes)	3.0.4

该表格基于这些资源。

 

[1] WebKit不支持spread方法 (bug 5968) 以及颜色插值 (bug 6034)。

参见

• <radialGradient>
• <stop>