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

修改线条的起点坐标。

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

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • SVG提供了大量的笔画属性,实现各种各样的描边效果。我们来介绍一下: stroke:笔画属性, stroke-wi...
    千锋阅读 856评论 0 0
  • 什么是SVG? SVG 指可伸缩矢量图形 (Scalable Vector Graphics)SVG 用来定义用于...
    浮若年华_7a56阅读 844评论 0 0
  • SVG 可伸缩矢量图形(Scalable Vector Graphics) 使用 XML 格式定义图像 是w3c的...
    小樓me阅读 1,180评论 0 1
  • 基本形状 SVG 有一些预定义的形状元素,可被开发者使用和操作: 1.矩形 <rect> 标签,使用x,y,wid...
    亿个小目标阅读 857评论 0 1
  • SVG提供了一个范围广泛stroke 属性。在本章中,我们将看看下面: stroke stroke-width:属...
    小冕阅读 920评论 0 1

友情链接更多精彩内容