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。保存文件。

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

SVG描边属性_SVG

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

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

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

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

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

复制两个 path 标签。

修改线条的起点坐标。

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

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

SVG描边属性_SVG_02

接下来我们学习 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 标签。

修改线条的起点坐标。

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

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