一篇文章带你了解SVGstroke属性

stroke属性定义了给定图形元素的外轮廓的颜色。它的默认值是none。

专注于为中小企业提供网站建设、成都网站建设服务,电脑端+手机端+微信端的三站合一,更高效的管理,为中小企业杜集免费做网站提供优质的服务。我们立足成都，凝聚了一批互联网行业人才，有力地推动了数千家企业的稳健成长，帮助中小企业通过网站建设实现规模扩充和转变。

一、属性

1. stroke-width

SVG具有stroke-width定义笔触宽度的CSS属性。

例：

（这是四个不同的示例stroke-width）

 
 
 
 
    
  
  
  
  
    2. 
  
  
  
  
  2.      
    3. 
  
  
  
  
  3. 
  
  
  
  
  4.      
    5. 
  
  
  
  
  5. 
  
  
  
  
  6.      
    7. 
  
  
  
  
  7. 
  
  
  
  
  8.      
    9. 
  
  
  
  
  9.

代码解析：

将笔划宽度设置为3个像素。您可以使用不同于像素的单位。在[SVG坐标系统单位中查看所有可用单位。

运行后图像效果：

2. stroke-linecap(描边线帽)

strokelinecap属性定义不同类型的开放路径的终结。

 
 
 
 
    
  
  
  
  
  1.  
    2. 
  
  
  
  
  2.    
    3. 
  
  
  
  
  3.    
    4. 
  
  
  
  
  4.    
    5. 
  
  
  
  
  5.  
    6. 
  
  
  
  
  6.      
    7. 
  
  
  
  
  7.

3. stroke-linejoin

该CSS属性stroke-linejoin, 定义如何在一个形状两条线之间的连接被渲染。该CSS属性stroke-linejoin可以采用三个值中的一个。这些值是(miter，round，bevel)。

案例：

stroke-linejoin，说明了这些不同的值。

 
 
 
 
    
  
  
  
  
    2. 
  
  
  
  
    3. 
  
  
  
  
  3. miter
    4. 
  
  
  
  
  4. 
  
  
  
  
    6. 
  
  
  
  
  6. round
    7. 
  
  
  
  
  7. 
  
  
  
  
    9. 
  
  
  
  
  9. bevel
    10. 
  
  
  
  
  10.

4. stroke-miterlimit

style样式中stroke-miterlimit属性与stroke-linejoin一起使用。

如果stroke-linejoin设置为斜接，则stroke-miterlimit可以使用来限制两条线相交的点（线角（角）延伸）之间的距离。

 
 
 
 
    
  
  
  
  
    2. 
  
  
  
  
  2. 
  
  
  
  
  3.            stroke-linejoin: miter; stroke-miterlimit: 1.0;
    4. 
  
  
  
  
  4.             ">
    5. 
  
  
  
  
  5. 1.0
    6. 
  
  
  
  
  6. 
  
  
  
  
  7.             stroke-width:16px;
    8. 
  
  
  
  
  8.             stroke-linejoin: miter;             stroke-miterlimit: 2.0;
    9. 
  
  
  
  
  9.             ">
    10. 
  
  
  
  
  10. 2.0
    11. 
  
  
  
  
  11. 
  
  
  
  
  12.             stroke-width:16px;
    13. 
  
  
  
  
  13.             stroke-linejoin: miter;             stroke-miterlimit: 4.0;
    14. 
  
  
  
  
  14.             ">
    15. 
  
  
  
  
  15. 4.0
    16. 
  
  
  
  
  16.

注意

stroke-miterlimit，三个路径如何使用三个不同的值，否则它们看起来几乎相同。

运行后图像效果：

5. stroke-dasharray

SVG CSS属性 stroke-dasharray用于绘制以虚线呈现的SVG形状的笔触。之所以称为“破折号数组”，是因为您提供了一个数字数组作为值。这些值定义破折号和空格的长度。

 
 
 
 
    
  
  
  
  
    2. 
  
  
  
  
  2. 
  
  
  
  
  3.      stroke-width: 6px;     stroke-dasharray: 10 5" />
    4. 
  
  
  
  
  4.

定义了一个带有虚线的笔划，虚线部分的宽度为10像素，虚线之间的间隔为5像素。

运行后图像效果：

带有不同破折号和空格宽度的

 
 
 
 
    
  
  
  
  
    2. 
  
  
  
  
    3. 
  
  
  
  
  3. 
  
  
  
  
  4. 
  
  
  
  
    6. 
  
  
  
  
  6. 
  
  
  
  
  7. 
  
  
  
  
  8.

 运行后图像效果：

代码解析：

第一行以10的虚线宽度开始，然后是5像素的间距，然后是5像素的虚线，然后是5像素的另一间距。然后重复该模式。

第二行以虚线宽度10开始，然后是5像素的间距，然后是5像素的虚线，最后是10像素的间距。

6. stroke-opacity

SVG CSS属性stroke-opacity用于定义SVG形状轮廓的不透明度。stroke-opacity取0和1之间的十进制数越接近0的值，越透明行程。该值越接近1，则笔划越不透明。默认stroke-opacity值为1，表示笔划完全不透明。

案例中，显示了三行带有不同stroke-opacity文本顶部的行 。

 
 
 
 
    
  
  
  
  
    2. 
  
  
  
  
  2. Text Behind Shape
    3. 
  
  
  
  
  3. 
  
  
  
  
  4. 
  
  
  
  
  5.                 stroke-width:16px;
    6. 
  
  
  
  
  6.                 stroke-opacity: 0.3;
    7. 
  
  
  
  
  7.                 ">
    8. 
  
  
  
  
  8. 
  
  
  
  
  9. 
  
  
  
  
  10.         stroke-opacity: 0.7;
    11. 
  
  
  
  
  11.                 ">
    12. 
  
  
  
  
  12. 
  
  
  
  
  13. 
  
  
  
  
  14.                 stroke-opacity: 1;
    15. 
  
  
  
  
  15.                 ">
    16. 
  
  
  
  
  16.

 运行效果:

注意：

靠后文本越来越不可见。

二、总结

本文基于Html基础，介绍了stoke属性。添加不一样的属性实现不同的效果，对于每一种属性进行详细的讲解通过丰富的案例分析，希望能够帮助你更好的学习。

欢迎大家积极尝试，有时候看到别人实现起来很简单，但是到自己动手实现的时候，总会有各种各样的问题，切勿眼高手低，勤动手，才可以理解的更加深刻。

分享标题：一篇文章带你了解SVGstroke属性
文章起源：http://www.shufengxianlan.com/qtweb/news34/156234.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

猜你还喜欢下面的内容

自适应网站知识

同城分类信息

成都二枢机房　　 　网站建设策划方案　　 　企业邮箱　　 　绵竹网站建设　　 　广安网站建设　　 　成都网站建设公司　　 　企业网站设计　　 　成都网站建设　　 　成都网站设计　　 　什邡网站建设　　 　中国电信西部信息中心机房　　 　成都网站推广　　 　成都seo优化　　 　商标注册　　 　广汉做网站　　 　网络营销推广　　 　短视频拍摄　　 　成都标志设计　　 　瑞杰管理　　 　成都商城网站开发