radialGradient
用来定义径向渐变,以对图形元素进行填充或描边。
用法
类别 | 渐变元素 |
---|---|
允许的内容物 | 任意数量、任意排序的下列元素: 描述性元素 <animate> , <animateTransform> , <set> , <stop> |
属性
全局属性
专有属性
DOM 接口
该元素实现了 SVGRadialGradientElement
接口。
示例
SVG
<svg width="120" height="120" viewBox="0 0 240 120"
xmlns="http://www.w3.org/2000/svg">
<defs>
<radialGradient id="exampleGradient">
<stop offset="10%" stop-color="gold"/>
<stop offset="95%" stop-color="green"/>
</radialGradient>
<radialGradient spreadMethod="reflect"
cx="50%"
cy="50%"
r="50%"
fx="25%"
fy="75%"
fr="10%"
id="flameGradient">
<stop offset="0%" stop-color="white"/>
<stop offset="10%" stop-color="yellow"/>
<stop offset="95%" stop-color="red"/>
</radialGradient>
</defs>
<circle fill="url(#exampleGradient)" cx="60" cy="60" r="50"/>
<circle fill="url(#flameGradient)" cx="180" cy="60" r="50"/>
</svg>
结果
技术参数
技术参数 | 状态 | 注释 |
---|---|---|
Scalable Vector Graphics (SVG) 2 <radialGradient> |
Candidate Recommendation | 加入 fr 属性 |
Scalable Vector Graphics (SVG) 1.1 (Second Edition) <radialGradient> |
Recommendation | 初始定义 |
浏览器兼容性
BCD tables only load in the browser
本页面上的兼容性表格是由结构化数据生成的。如果你想要为此数据做贡献,请移步至 https://github.com/mdn/browser-compat-data 并给我们发送 pull request。