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元素定义。看下面的例子：
复制代码
代码如下: