前端学习教程-SVG描边属性，SVG提供了大量的笔画属性，实现各种各样的描边效果。我们来介绍一下：

stroke：笔画属性，

stroke-width：笔画宽度属性，

stroke-linecap：笔画线帽属性，

stroke-dasharray：虚线笔画属性。

所有的描边属性都可以应用于任何类型的线条、文本和元素的轮廓，如 circle。

首先我们学习 stroke 属性，它定义了一个元素的线条、文本或轮廓的颜色，值是任何合法的颜色值。

打开编辑器，新建一个 stroke-properties.html 文件，补全基础代码，在 body 里添加一个 svg 标签，定义属性 width 等于 300，height 等于 80。

在 svg 里添加 g 标签，给它定义一个 fill 属性，值为 none。

在 g 标签里添加 path 标签，定义属性 stroke 等于 red，再定义一个 d 属性，画一条线。

复制两个 path 标签。

修改线条的起点坐标。

修改第二条线的描边颜色为 black。修改第三条线的描边颜色为 blue。保存文件。

在浏览器中预览，三条颜色不同的线条就绘制好了。

接下来我们学习 stroke-width 笔画宽度属性。它定义了一个元素的线条、文本或轮廓的厚度。值是一个数字。

回到编辑器，在上个 svg 结尾处添加一个 br 标签。回车换行。

添加一个新的 svg 标签，属性 width 等于 300，height 等于 80。

在 svg 里添加 g 标签，给它定义一个 fill 属性，值为 none。stroke 属性，值为 black。

在 g 标签里添加 path 标签，定义属性 stroke-width 等于 2，再定义一个 d 属性，画一条线。

复制两个 path 标签。

修改线条的起点坐标。

修改第二条线的线宽为 4。修改第三条线的线宽为 6。保存。

在浏览器中预览，三条线厚度不同的黑色线条就绘制好了。

接下来我们学习 stroke-linecap， 笔画线帽属性。它定义了一个开放路径的不同类型的结束点。它的值是有三个：

butt ([bʌt]) ，没有线帽，也是默认属性。

round ([raʊnd])，圆形线帽。

square ([skwer])，方形线帽。

回到编辑器，在上个 svg 结尾处添加一个 br 标签。回车换行。

添加一个新的 svg 标签，属性 width 等于 300，height 等于 80。

在 svg 里添加 g 标签，给它定义一个 fill 属性，值为 none。stroke 属性，值为 black，stroke-width 属性，值为 6。

在 g 标签里添加 path 标签，定义属性 stroke-linecap 等于 butt，再定义一个 d 属性，画一条线。

复制两个 path 标签。

修改线条的起点坐标。

修改第二条线的线帽属性为 round。修改第三条线的线帽属性为 square。保存。

在浏览器中预览，三条线帽不同的黑色线条就绘制好了。

接下来我们学习 stroke-dasharray 属性，dasharray，直译过来就是虚线序列。这个属性用来创建虚线。它的值是一个数字序列，以此定义虚线的线条与空隙的大小，序列值是个数字，至少定义两个值。比如，"20，20" (直接读 20 20)，是这样的虚线；"20, 10, 5, 5 ,5, 10" 是这样的虚线！

回到编辑器，在上个 svg 结尾处添加一个 br 标签。回车换行。

添加一个新的 svg 标签，属性 width 等于 300，height 等于 80。

在 svg 里添加 g 标签，给它定义一个 fill 属性，值为 none。stroke 属性，值为 black，stroke-width 属性，值为 4。

在 g 标签里添加 path 标签，定义属性 stroke-dasharray 等于 "5,5" ，再定义一个 d 属性，画一条线。

复制两个 path 标签。

修改线条的起点坐标。

修改第二条线的虚线序列值。修改第三条线的虚线序列值。保存。

在浏览器中预览，三条不同的虚线就绘制好了。

前端学习教程http://wap.mobiletrain.org/study/