SVG和canvas中是一样的，都是使用标准的HTML/CSS中的颜色表示方法，这些颜色都可以用于fill和stroke属性。
基本有下面这些定义颜色的方式：
1. 颜色名字： 直接使用颜色名字red, blue, black…
2. rgba/rgb值： 这个也很好理解，例如#ff0000,rgba(255,100,100,0.5)。
3. 十六进制值： 用十六进制定义的颜色，例如#ffffff。
4. 渐变值：这个也与canvas中一样，支持两种渐变色：线性渐变，环形渐变。如下图所示：
5. 图案填充：使用自定义的图案作为填充色。
前面几种都很简单，重点看下后面两种填充色。
线性渐变
使用linearGradient元素即可定义线性渐变，每一个渐变色成分使用stop元素定义。看下面的例子：
复制代码
<svg width=”120″ height=”240″>
<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>
<style type=”text/css”><![CDATA[
#rect1 { fill: url(#Gradient1); }
.stop1 { stop-color: red; }
.stop2 { stop-color: black; stop-opacity: 0; }
.stop3 { stop-color: blue; }
]]>
</style>
</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>
在这个例子中，我们需要注意：
1. 渐变色元素必须要放到defs元素中；
2. 需要给渐变色元素设置id值，否则的话，别的元素无法使用这个渐变色。
3. 渐变色的成员使用stop定义，它的属性也可以使用CSS定义；它支持class，id这种标准HTML都支持的属性。其它常用属性如下
