SVG Gradients（渐变）

渐变是指从一种颜色向另外一种颜色的平滑转换。几种颜色转化能同时作用于同一个元素中。

SVG中主要有两种渐变:

• Linear （线性渐变）
• Radial （径向渐变）

SVG <linearGradient>

<linearGradient>元素必须嵌套在<defs>中

<linearGradient>可以定义成水平、垂直、任意角度渐变：

• 水平渐变：y1 、y2相同， x1、x2 不同
• 垂直渐变：x1、x2 相同， y1 、y2不同
• 垂直渐变：x1、x2 不同， y1 、y2不同

示例1

水平渐变，从yellow 到 red

代码说明：

• <linearGradient>中的x1, x2, y1,y2分别定义了渐变的起止位置
• 渐变可以设置多个颜色，每种颜色都用<stop>指定

示例2

垂直渐变，从yellow 到 red

示例3

水平渐变，从yellow 到 red，并增加了一个文本

SVG

    
         
            
             
           
        
       
       
     
        SVG