Join MDN and developers like you at Mozilla's View Source conference, 12-14 September in Berlin, Germany. Learn more at https://viewsourceconf.org

linearGradient

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>

ScreenshotLive sample

属性

Global 属性

专有属性

DOM 接口

该元素实现了SVGLinearGradientElement接口。

浏览器兼容性

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)。

参见

文档标签和贡献者

标签: 
 此页面的贡献者: Sebastianz, fanxiaojie, ziyunfei, xile611
 最后编辑者: Sebastianz,