一、颜色
我们之前使用英文来表示颜色并进行填充，比如：
-
<circle cx="800" cy="120" r="110" stroke="black" stroke-width="2" fill="red" />
这些颜色都很简单所以用起来很方便，但是复杂的颜色就不行了，英文单词无法描述某些颜色，所以现在我们需要使用将要学习的rgb和hsl来进行颜色表示。
1、RGB
RGB即Red、Green、Blue三种颜色的缩写，RGB即使用红、绿、蓝三种颜色进行组合叠加来表示颜色的一种颜色标准。
RGB在网页中的使用：
网页颜色是以16进制代码表示，一般格式为#DEFABC （字母范围从A-F,数字从0-9 ）；如黑色，在网页代码中便是：#000000(在css编写中可简写为#000)。当颜色代码为#AABB11时，可以简写为#AB1表示，如#135与#113355表示同样的颜色。此外RGB还有很多其他格式，比如：
我们发现，我们如果没有取色工具，想要使用RGB表示我们想要的颜色我们需要进行大量的数据测试，且光凭肉眼判断并不准确。
下面我们具体的来画个图：
-
<!DOCTYPE html> <html> <head> <title>rgbDemo</title> </head> <body> <svg id="svg" xmlns="http://www.w3.org/2000/svg" version="1.1" width="1400" height="500"> <circle cx="300" cy="120" r="110" stroke="black" stroke-width="2" fill="rgb(255,0,0)" /> <circle cx="200" cy="200" r="110" stroke="black" stroke-width="2" fill="rgb(0,255,0)" /> <circle cx="400" cy="200" r="110" stroke="black" stroke-width="2" fill="rgb(0,0,255)" /> </svg> </body> </html>
2、HSL
HSL是另一种色彩模式是工业界的颜色标准，是通过对色相(H)、饱和度(S)、明度(L)三个颜色通道的变化以及它们相互之间的叠加来得到各式各样的颜色的，HSL即是代表色相，饱和度，明度三个通道的颜色。
同样的我们可以简单测试一下：
-
<!DOCTYPE html> <html> <head> <title>hslDemo</title> </head> <body> <svg id="svg" xmlns="http://www.w3.org/2000/svg" version="1.1" width="1400" height="500"> <circle cx="300" cy="120" r="110" stroke="black" stroke-width="2" fill="hsl(120,10%,10%)" /> <circle cx="200" cy="200" r="110" stroke="black" stroke-width="2" fill="hsl(200,50%,50%)" /> <circle cx="400" cy="200" r="110" stroke="black" stroke-width="2" fill="hsl(250,80%,80%)" /> </svg> </body> </html>
3、透明度
如果我们希望看到有透明度的色彩，只需要使用rgba()、hsla()或者opacity属性即可，其中a表示透明度。
简单的栗子：
-
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>透明度</title> 5 </head> 6 <body> 7 <!--svg--> 8 <svg id="svg" xmlns="http://www.w3.org/2000/svg" version="1.1" width="1400" height="500"> 9 <circle cx="300" cy="120" r="110" stroke="black" stroke-width="2" fill="rgba(255,0,0,0.5)" /> 10 <circle cx="240" cy="200" r="110" stroke="black" stroke-width="2" fill="hsla(120,100%,50%,0.5)" /> 11 <circle cx="380" cy="200" r="110" stroke="black" stroke-width="2" fill="rgb(0,0,255)" opacity="0.5"/> 12 </svg> 13 </body> 14 </html>
二、渐变
上面的某个元素都是整体颜色，下面我们来学习如何制作渐变色，就像这样色的：
1、线性渐变
线性渐变就是按照直线的方向进行颜色渐变。在SVG中我们使用<linearGradient>标签和<stop>标签进行线性渐变处理：
下面我们看实例：
-
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>线性渐变</title> 5 </head> 6 <body> 7 <svg id="svg" xmlns="http://www.w3.org/2000/svg" version="1.1" width="1400" height="500"> 8 <defs> 9 <linearGradient id="grad1" x1="0" y1="0" x2="1" y2="1"> 10 <stop offset="0" stop-color="red" /> 11 <stop offset="1" stop-color="blue" /> 12 </linearGradient> 13 </defs> 14 <rect x="50" y="50" width="300" height="150" fill="url(#grad1)" /> 15 </svg> 16 </body> 17 </html>
其中的标签说明：
首先我们使用<defs>标签进行预定义，即我们将描述的线性渐变先存放在<defs>标签中以供使用。
然后是<linearGradient>标签，这是真正描述线性渐变的标签，其中x1,y1、x2,y2分别是渐变的起点和终点坐标，（0,0）表示图形标签的最左端，（1,1）表示图形标签的最右端。
<linearGradient>标签中使用了<stop>标签，这是用来设置渐变色的终点的。比如offset=0，stop-color="red"就表示最左端点颜色为red，然后offset=1，stop-color="blue"，就表示最右端颜色为blue，然后根据渐变起点坐标和终点坐标的设置（0，0）到（1，1），然后就形成了从最左端到最右端，红色到蓝色的线性渐变效果。
说明：<linearGradient>默认的坐标系不是世界坐标系，并且上面已经说明（0,0）表示图形标签的最左端，（1,1）表示图形标签的最右端。如果我们想使用世界坐标系或者说用户坐标系作为渐变坐标，我们可以使用gradientUnits="userSpaceOnUse"属性来进行设置。如：
-
<defs> <linearGradient id="grad1" x1="100" y1="100" x2="200" y2="200" gradientUnits="userSpaceOnUse"> <stop offset="0" stop-color="red" /> <stop offset="1" stop-color="blue" /> </linearGradient> </defs>
2、径向渐变
径向渐变就是从给定起点进行圆形渐变。在SVG中使用<redialGradient>标签和<stop>标签进行径向渐变处理：
类似线性渐变，我们只需要将<linearGradient>标签换成<radialGradient>标签就O了。
-
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>径向渐变</title> </head> <body> <svg id="svg" xmlns="http://www.w3.org/2000/svg" version="1.1" width="1400" height="500"> <defs> <radialGradient id="grad1" cx="0.5" cy="0.5" r="0.5" fx="0.6" fy="0.4"> <stop offset="0" stop-color="black" /> <stop offset="0.3" stop-color="red" /> <stop offset="1" stop-color="yellow" /> </radialGradient> </defs> <circle cx="300" cy="200" r="150" fill="url(#grad1)" /> </svg> </body> </html>
其中cx,cy用来表示渐变焦点的坐标，而fx，fy可以使焦点偏移，r表示渐变半径。
三、笔刷
笔刷很容易理解，相当于一个样式容器，使用的使用我们只需要调用这个笔刷进行进行样式填充。
直接看实例：
-
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>笔刷</title> 5 </head> 6 <body> 7 <svg id="svg" xmlns="http://www.w3.org/2000/svg" version="1.1" width="1400" height="500"> 8 <defs> 9 <pattern id="p1" x="0" y="0" width="0.2" height="0.2"> 10 <circle cx="10" cy="10" r="5" fill="red"></circle> 11 <polygon points="30 0 60 50 0 50" fill="green"></polygon> 12 </pattern> 13 </defs> 14 <rect x="100" y="100" width="500" height="300" fill="url(#p1)" stroke="red" stroke-width="2px"></rect> 15 </svg> 16 </body> 17 </html>
其中，我们使用了<pattern>标签，我们在标签中绘制了一个圆表示太阳，一个三角形表示树木，然后使用width=0.2和height=0.2来表示该笔刷所占标签的比例为0.2，即横向和纵向都平铺5个笔刷样式。
说明：类似上面使用的gradientUnits="userSpaceOnUse"属性来改变坐标系，笔刷标签<pattern>同样可以这样使用。即使用patternUnits="userSpaceOnUse"属性：
-
<svg id="svg" xmlns="http://www.w3.org/2000/svg" version="1.1" width="1400" height="500"> <defs> <pattern id="p1" x="0" y="0" width="50" height="50" patternUnits="userSpaceOnUse"> <circle cx="10" cy="10" r="5" fill="red"></circle> <polygon points="30 0 60 50 0 50" fill="green"></polygon> </pattern> </defs> <rect x="100" y="100" width="400" height="300" fill="url(#p1)" stroke="red" stroke-width="2px"></rect> </svg>
我们注意到<pattern>标签中的图形标签<circle>、<rect>的坐标是世界坐标系，如果想要以标签为参考的坐标系，即按比例表示坐标，那么我们可以使用patternUnits="objectBoundingBox"和patternContentUnits="objectBoundingBox"属性来操作：
-
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>pattern</title> 5 </head> 6 <body> 7 <svg id="svg" xmlns="http://www.w3.org/2000/svg" version="1.1" width="1400" height="500"> 8 <defs> 9 <pattern id="p1" x="0" y="0" width="0.5" height="0.5" patternUnits="objectBoundingBox" patternContentUnits="objectBoundingBox" > 10 <circle fill="red" cx="0.2" cy="0.2" r="0.2"></circle> 11 <polygon points="0.1 0 0.15 0.16 0 0.15" fill="yellow"></polygon> 12 <polygon points="0.2 0.1 0.25 0.26 0.2 0.25" fill="yellow"></polygon> 13 </pattern> 14 </defs> 15 <rect x="100" y="100" width="400" height="300" fill="url(#p1)" stroke="green" stroke-width="2px"></rect> 16 </svg> 17 </body> 18 </html>
本文介绍的这些语法都很简单，关键在于你如何使用这些操作来绘制想要的图形。这需要大量尝试以及至关重要的创造灵感，学会享受这种感觉。