学习SVG系列（5）：SVG渐变

SVG渐变

渐变是一种从一种颜色到另一种颜色的平滑过渡，可以把多个颜色的过渡应用到同一个元素。

渐变有两种：

         Linear

         Redial

 

线性渐变-<linearGradient>

linearGradient元素用于定义线性渐变

linearGradient标签必须嵌套在defs标签的内部。defs标签是definitions的缩写，它可对诸如渐变之类的特殊元素进行定义。

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

         1、当y1和y2相等，而x1和x2不同时，可创建水平渐变

         2、当x1和x2相等，而y1和y2不同时，可创建垂直渐变

         3、当x1和x2不同，且y1和y2不同时，可创建角形渐变

 

实例1

定义垂直线性渐变从黄色到蓝色的椭圆形，垂直渐变：

 

SVG代码：

         <svg xmlns="http://www.w3.org/2000/svg">

        <defs>

            <linearGradient id="grad1" x1="0%" y1="0%" x2="0%" y2="100%">

                <stop offset="0%" style="stop-color:rgb(255, 216, 0);stop-opacity:1;" />

                <stop offset="100%" style="stop-color:rgb(0, 255, 255);stop-opacity:1;"/>

            </linearGradient>

        </defs>

        <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)"/>

    </svg>

 

实例2

定义水平线性渐变从黄色到蓝色的椭圆形，水平渐变：

 

SVG代码：

<svg xmlns="http://www.w3.org/2000/svg">

        <defs>

            <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">

                <stop offset="0%" style="stop-color:rgb(255, 216, 0);stop-opacity:1;" />

                <stop offset="100%" style="stop-color:rgb(0, 255, 255);stop-opacity:1;"/>

            </linearGradient>

        </defs>

        <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)"/>

    </svg>

 

实例3

定义角形渐变从黄色变蓝色

 

SVG代码：

<svg xmlns="http://www.w3.org/2000/svg">

        <defs>

            <linearGradient id="grad1" x1="0%" y1="0%" x2="50%" y2="50%">

                <stop offset="0%" style="stop-color:rgb(255, 216, 0);stop-opacity:1;" />

                <stop offset="100%" style="stop-color:rgb(0, 255, 255);stop-opacity:1;"/>

            </linearGradient>

        </defs>

        <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)"/>

    </svg>

 

实例4

放射性渐变-<radialGradient>

定义一个放射性渐变从白色到红色椭圆：

 

SVG代码：

<svg height="400" width="400"  xmlns="http://www.w3.org/2000/svg">

        <defs>

            <radialGradient id="rad1" 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(255, 0, 0);stop-opacity:1"/>

            </radialGradient>

        </defs>

        <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#rad1)"/>

    </svg>

代码解析：

         1、radialGradient标签的id属性可为渐变定义一个唯一的名称

         2、CX、CY和r属性定义的最外层圆和Fx和Fy定义的最内层圆

         3、渐变颜色范围可以由两个或两个以上的颜色组成。每种颜色用一个<stop>标签指定。offset属性用来定义渐变色开始和结束

         4、填充属性把ellipse元素链接到此渐变