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

radialGradient

radialGradient用来定义径向,用于图形元素的填充或描边。

用法

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

示例

源代码 输出结果
<?xml version="1.0"?>
<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>
        <radialGradient id="MyGradient">
            <stop offset="10%" stop-color="gold"/>
            <stop offset="95%" stop-color="green"/>
        </radialGradient>
    </defs>

    <circle fill="url(#MyGradient)"
            cx="60" cy="60" r="50"/>
</svg>

» radialGradient.svg

属性

Global 属性

专有属性

DOM 接口

该元素实现了SVGRadialGradientElement接口。

浏览器兼容性

Feature Chrome Firefox (Gecko) IE Opera Safari
Basic support 1.0 1.5 (1.8) 9.0 9.0 3.0.4[1]
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support 3.0 1.0 (1.8) 未实现 (Yes) 3.0.4[1]

该图表基于这些资源

[1] WebKit 不支持颜色插值 (bug 6034).

相关的内容

文档标签和贡献者

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