13.4 SVG径向渐变(Radial Gradient)

径向渐变指的是从圆心向外辐射的颜色梯度变换

SVG 径向渐变 - radialGradient

<radialGradient> 元素用来定义一个径向渐变,和前面一样,它也必须包含在 <defs> 定义标签中。

实例代码1 - 椭圆


  
    
      
      
    
  
  

代码解释

  • <radialGradient> 标签的id属性定义了该渐变的唯一标识名称
  • cx, cy 和 r 属性定义了最外面的圆,fx 和 fy 定义了最里面的圆
  • 渐变的颜色范围可以由2个或多个颜色组成。每个颜色通过一个 <stop> 标签来指定。offset属性用来定义渐变颜色开始和结束的位置。
  • fill 属性把椭圆(ellipse)元素链接到该渐变。

修改cx, cy, r, fx, fy的值,你就可以实现不同的径向渐变效果。

自己试试 »