Gradients 渐变

线性渐变-Linear Gradient
线性渐变沿着直线改变颜色，要插入一个线性渐变，你需要在SVG文件的defs元素内部，创建一个<linearGradient>节点


下面是源代码，注意看是如何进行链接的
<svg width="120" height="240" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <defs>
        <linearGradient id="Gradient1">
            <stop class="stop1" offset="0%" />
            <stop class="stop2" offset="50%" />
            <stop class="stop3" offset="100%" />
        </linearGradient>
        <linearGradient id="Gradient2" x1="0" x2="0" y1="0" y2="1">
            <stop offset="0%" stop-color="red" />
            <stop offset="50%" stop-color="black" stop-opacity="0" />
            <stop offset="100%" stop-color="blue" />
        </linearGradient>

    </defs>

    <rect id="rect1" x="10" y="10" rx="15" ry="15" width="100" height="100" />
    <rect x="10" y="120" rx="15" ry="15" width="100" height="100"  fill="url(#Gradient2)" />

</svg>

<style type="text/css">
    #rect1 {
        fill: url(#Gradient1);
    }

    .stop1 {
        stop-color: red;
    }

    .stop2 {
        stop-color: black;
        stop-opacity: 0;
        注意：这里虽然显示的是白色，但是和 
        stop-color:white直接设置成白色还是有区别的
    }

    .stop3 {
        stop-color: blue;
    }
</style>

以上是一个应用了线性渐变的<rect>元素的示例。线性渐变内部有几个<stop>结点，
这些结点通过指定位置的offset（偏移）属性和stop-color（颜色中值）属性来说明在渐变的特定位置上应该是什么颜色；
可以直接指定这两个属性值，也可以通过CSS来指定他们的值，该例子中混合使用了这两种方法。


stop-color 的设定
stop-color:white; 上/下 stop-color:black;stop-opacity:0;



<linearGradient>
元素还需要一些其他的属性值，它们指定了渐变的大小和出现范围。
渐变的方向可以通过两个点来控制，它们分别是属性x1、x2、y1和y2，这些属性定义了渐变路线走向。
渐变色默认是水平方向的，但是通过修改这些属性，就可以旋转该方向。
下例中的Gradient2创建了一个垂直渐变。




径向渐变-Radial Gradient
径向渐变与线性渐变相似，只是它是从一个点开始发散绘制渐变
创建径向渐变需要在文档的defs中添加一个<radialGradient>元素


上述的代码是
<svg width="120" height="240" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <defs>
        <radialGradient id="RadialGradient1">
            <stop offset="0%" stop-color="red" />
            <stop offset="100%" stop-color="blue" />
        </radialGradient>
        <radialGradient id="RadialGradient2" cx="0.25" cy="0.25" r="0.25">
            <stop offset="0%" stop-color="red" />
            <stop offset="100%" stop-color="blue" />
        </radialGradient>
    </defs>

    <rect x="10" y="10" rx="15" ry="15" width="100" height="100" fill="url(#RadialGradient1)" />
    <rect x="10" y="120" rx="15" ry="15" width="100" height="100" fill="url(#RadialGradient2)" />

</svg>

径向渐变也是通过两个点来定义其边缘位置，两点中的第一个点定义了渐变结束所围绕的圆环，它需要一个中心点，由cx和cy属性及半径r来定义，
通过设置这些点我们可以移动渐变范围并改变它的大小，如上例的第二个<rect>所展示的。

第二个点被称为焦点，由fx和fy属性定义。第一个点描述了渐变边缘位置，焦点则描述了渐变的中心，



如果没有给出焦点，将认为该点与中心点的位置一致。

<svg width="120" height="120" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <defs>
        <radialGradient id="Gradient" cx="0.5" cy="0.5" r="0.5" fx="0.25" fy="0.25">
            <stop offset="0%" stop-color="red" />
            <stop offset="100%" stop-color="blue" />
        </radialGradient>
    </defs>

    <rect x="10" y="10" rx="15" ry="15" width="100" height="100" fill="url(#Gradient)" stroke="black"
        stroke-width="2" />

    <circle cx="60" cy="60" r="50" fill="transparent" stroke="white" stroke-width="2" />
    <circle cx="35" cy="35" r="2" fill="white" stroke="white" />
    <circle cx="60" cy="60" r="2" fill="white" stroke="white" />
    <text x="38" y="40" fill="white" font-family="sans-serif" font-size="10pt">(fx,fy)</text>
    <text x="63" y="63" fill="white" font-family="sans-serif" font-size="10pt">(cx,cy)</text>
</svg>

线性渐变和径向渐变都需要一些额外的属性用于描述渐变过程，
这里我希望额外提及一个spreadMethod属性，该属性控制了当渐变到达终点的行为，但是此时该对象尚未被填充颜色。
这个属性可以有三个值：pad、reflect或repeat。
Pad就是目前我们见到的效果，即当渐变到达终点时，最终的偏移颜色被用于填充对象剩下的空间。
reflect会让渐变一直持续下去，不过它的效果是与渐变本身是相反的，以100%偏移位置的颜色开始，逐渐偏移到0%位置的颜色，然后再回到100%偏移位置的颜色。
repeat也会让渐变继续，但是它不会像reflect那样反向渐变，而是跳回到最初的颜色然后继续渐变。


下面是代码，注意spreadMethod的值

<radialGradient id="GradientPad" cx="0.5" cy="0.5" r="0.4" fx="0.75" fy="0.75" spreadMethod="pad">
    <stop offset="0%" stop-color="red" />
    <stop offset="100%" stop-color="blue" />
</radialGradient>
<radialGradient id="GradientRepeat" cx="0.5" cy="0.5" r="0.4" fx="0.75" fy="0.75" spreadMethod="repeat">
    <stop offset="0%" stop-color="red" />
    <stop offset="100%" stop-color="blue" />
</radialGradient>
<radialGradient id="GradientReflect" cx="0.5" cy="0.5" r="0.4" fx="0.75" fy="0.75" spreadMethod="reflect">
    <stop offset="0%" stop-color="red" />
    <stop offset="100%" stop-color="blue" />
</radialGradient>
目录

径向渐变-Radial Gradient
