前言
当我们绘制好了形状之后，是不会在SVG上显示出来（当然浏览器会给形状定义默认的填充色）。需要学习如何给形状添加颜色。可以使用几种方法来着色，包括指定对象的属性，使用内联CSS样式，或者内嵌的CSS样式，或者使用外部的CSS样式文件。大多数的web网站的SVG使用的是内联样式CSS，对于这些方法都有优缺点。
Fill 和 Stroke 属性
要使得形状显示出来，可以用两个属性来解决，一个是fill属性，一个是stroke属性，fill是填充，stroke是描边。
<rect x="10" y="10" width="100" height="100" stroke="blue" fill="purple" fill-opacity="0.5" stroke-opacity="0.8"/>
如上图，定义了一个矩形，设置填充颜色为蓝色，边框颜色为紫色。此外，在SVG中你可以分别定义填充色和边框色的不透明度，属性fill-opacity控制填充色的不透明度，属性stroke-opacity控制描边的不透明度。
描边
除了颜色属性，还有其他一些属性用来控制绘制描边的方式。
<svg width="160" height="140" xmlns="http://www.w3.org/2000/svg" version="1.1">
<line x1="40" x2="120" y1="20" y2="20" stroke="black" stroke-width="20" stroke-linecap="butt"/>
<line x1="40" x2="120" y1="60" y2="60" stroke="black" stroke-width="20" stroke-linecap="square"/>
<line x1="40" x2="120" y1="100" y2="100" stroke="black" stroke-width="20" stroke-linecap="round"/>
</svg>
stroke-width属性定义了描边的宽度。注意，描边是以路径为中心线绘制的，在上面的例子里，路径是粉红色的，描边是黑色的。如你所见，路径的每一侧都有均匀分布的描边。
第二个影响描边的属性是stroke-linecap属性，如上所示。它控制边框终点的形状。
stroke-linecap属性的值有三种可能值：
1、butt用直边结束线段，它是常规做法，线段边界90度垂直于描边的方向、贯穿它的终点。 2、square的效果差不多，但是会稍微超出实际路径的范围，超出的大小由stroke-width控制。 3、round表示边框的终点是圆角，圆角的半径也是由stroke-width控制的。
还有一个stroke-linejoin属性，用来控制两条描边线段之间，用什么方式连接：
<svg width="160" height="280" xmlns="http://www.w3.org/2000/svg" version="1.1">
<polyline points="40 60 80 20 120 60" stroke="black" stroke-width="20"
stroke-linecap="butt" fill="none" stroke-linejoin="miter"/>
<polyline points="40 140 80 100 120 140" stroke="black" stroke-width="20"
stroke-linecap="round" fill="none" stroke-linejoin="round"/>
<polyline points="40 220 80 180 120 220" stroke="black" stroke-width="20"
stroke-linecap="square" fill="none" stroke-linejoin="bevel"/>
</svg>
每条折线都是由两个线段连接起来的，连接处的样式由stroke-linejoin属性控制，它有三个可用的值，miter是默认值，表示用方形画笔在连接处形成尖角，round表示用圆角连接，实现平滑效果。最后还有一个值bevel，连接处会形成一个斜接。
最后，你可以通过指定stroke-dasharray属性，将虚线类型应用在描边上。
<svg width="200" height="150" xmlns="http://www.w3.org/2000/svg" version="1.1">
<path d="M 10 75 Q 50 10 100 75 T 190 75" stroke="black"
stroke-linecap="round" stroke-dasharray="5,10,5" fill="none"/>
<path d="M 10 75 L 190 75" stroke="red"
stroke-linecap="round" stroke-width="1" stroke-dasharray="5,5" fill="none"/>
</svg>
stroke-dasharray属性的参数，是一组用逗号分割的数字组成的数列。注意，和path不一样，这里的数字必须用逗号分割（空格会被忽略）。每一组数字，第一个用来表示填色区域的长度，第二个用来表示非填色区域的长度。所以在上面的例子里，第二个路径会先做5个像素单位的填色，紧接着是5个空白单位，然后又是5个单位的填色。如果你想要更复杂的虚线模式，你可以定义更多的数字。第一个例子指定了3个数字，这种情况下，数字会循环两次，形成一个偶数的虚线模式（奇数个循环两次变偶数个）。所以该路径首先渲染5个填色单位，10个空白单位，5个填色单位，然后回头以这3个数字做一次循环，但是这次是创建5个空白单位，10个填色单位，5个空白单位。通过这两次循环得到偶数模式，并将这个偶数模式不断重复。
另外还有一些关于填充和边框的属性，包括fill-rule，用于定义如何给图形重叠的区域上色；stroke-miterlimit，定义什么情况下绘制或不绘制边框连接的miter效果；还有stroke-dashoffset，定义虚线开始的位置。
