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 标签。

　　修改线条的起点坐标。

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

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

　　关于 SVG 描边属性就讲完了。大家快动手试试吧!

上一篇

SVG绘制文本

下一篇

表格标题和结构分组