SVG径向渐变用于表示一种颜色到另一种颜色的圆形过渡。
【SVG径向渐变用法示例】<
radialGradient>
元素定义径向渐变。我们可以在<
defs>
元素中使用<
radialGradient>
元素。
例子
<
!DOCTYPE html>
<
html>
<
body>
<
svg height="450" width="450">
<
defs>
<
radialGradient id="grad1" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
<
stop offset="0%" style="stop-color:rgb(255, 255, 255);
stop-opacity:0" />
<
stop offset="100%" style="stop-color:rgb(0, 0, 255);
stop-opacity:1" />
<
/radialGradient>
<
/defs>
<
ellipse cx="250" cy="100" rx="120" ry="70" fill="url(#grad1)" />
<
/svg>
<
/body>
<
/html>
立即测试
解释
- id属性定义渐变的唯一名称。
- fx和fy定义最内圆, cx, cy和r属性定义最外圆。
- 渐变颜色范围可能由两种或更多种颜色组成, 每种颜色都包含一个 标签。 offset属性定义渐变颜色开始和结束的位置。
- fill属性用于将eclipse元素链接到渐变。
推荐阅读
- SVG光栅图像示例和解释
- SVG遮罩mask用法示例
- SVG线性渐变用法示例
- SVG渐变使用示例
- SVG feTurbulence过滤器用法示例
- SVG feoffset过滤器用法示例
- SVG feFlood过滤器用法示例
- 13款最佳Android离线模拟游戏下载推荐合集（哪个更好玩（））
- 10款iOS最佳离线射击游戏下载推荐合集（哪个最好玩（））