13.3 SVG线性渐变(Linear Gradient)

渐变是颜色之间的过渡

SVG 渐变

和CSS3一样,SVG也支持渐变,渐变就是从一个颜色到另外一个颜色的平滑过渡,SVG支持单个元素使用多个渐变。渐变方式有两种:线性和径向。

SVG 线性渐变 - linearGradient

<linearGradient> 元素用来定义一个线性渐变。

<linearGradient> 元素必须被包含在一个 <defs> 标签中。如前面所述,<defs> 标签用来包含特殊元素(如滤镜、渐变等)。

线性渐变可以被定义为水平、垂直或角度渐变:

  • 当y1和y2相等,x1和x2不同时,创建水平渐变
  • 当x1和x2相等,y1和y2不同时,创建垂直渐变
  • 当y1和y2不同并且x1和x2也不同时,创建角度渐变(Angular gradients)

实例代码1 - 水平渐变


  
    
      
      
    
  
  

代码解释

  • <linearGradient> 标签的id属性定义渐变的唯一标识名称
  • <linearGradient> 标签的x1, x2, y1,y2属性定义渐变的起始位置
  • 渐变的颜色范围可以由2个或多个颜色组成。每一种颜色都通过一个<stop>标签来指定。 offset属性用来定义渐变颜色开始和结束的位置。
  • fill 属性把椭圆(ellipse)元素链接到该渐变。

修改x1, x2, y1, y2的值,你就可以分别实现不同角度(水平和垂直是特殊的角度,分别为0°和90°)的渐变。

自己试试 »