SVG进阶|SVG渐变(SVG GRADIENTS)

　　第一个颜色停止点是#00cc00，它位于矩形边部10%的地方。因为spreadMethod属性被设置为pad，在矩形0-10%距离的地方仍然使用第一种颜色#00cc00来填充。

　　在第一个颜色停止点之后是第二个颜色停止点，它的颜色是#006600，位于矩形边部30%距离的地方。

　　第三个颜色停止点的颜色是#cc0000，位于矩形边部70%距离的地方。

　　第四个颜色停止点的颜色是#000099，位于矩形边部90%距离的地方。在这之后的矩形颜色使用第四个颜色停止点的颜色来填充，因为code>spreadMethod属性被设置为pad。

　　径向渐变

　　径向渐变是一种圆形的颜色渐变方式。下面是几个例子：


　　在上面的例子中,最后三个绿色的径向渐变分别将渐变的中心设置在不同的位置上，其它都相同，得到的效果却有所不同。第一个绿色径向将被的中心位于矩形的中心位置，第二个绿色径向渐变的中心位于矩形的上边部中心位置，第三个绿色径向渐变的中心位于军训的左上角位置。

　　我们可以使用<radialGradient>元素来定义颜色径向渐变。下面是一个例子：

<svg xmlns="http://www.w3.org/2000/svg"
         xmlns:xlink="http://www.w3.org/1999/xlink">
    <defs>
        <radialGradient id="myRadialGradient4"
           fx="5%" fy="5%" r="65%"
           spreadMethod="pad">
          <stop offset="0%"   stop-color="#00ee00" stop-opacity="1"/>
          <stop offset="100%" stop-color="#006600" stop-opacity="1" />
        </radialGradient>
    </defs>

    <rect x="340" y="10" width="100" height="100" rx="10" ry="10"
           style="fill:url(#myRadialGradient4);
                  stroke: #005000; stroke-width: 3;" />
</svg>

　　上面的代码实际上是前面例子中第四个绿色径向渐变的代码。在径向渐变中，颜色停止点

　　下面的表格中列出了