一篇文章教会你使用SVG 画线

SVG 元素是一个SVG基本形状，用来创建一条连接两个点的线。元素用于在SVG图像内部绘制线条。可以绘制水平直线，垂直竖线直线、斜角直线等。

创新互联公司从2013年开始，是专业互联网技术服务公司，拥有项目成都网站建设、网站制作网站策划，项目实施与项目整合能力。我们以让每一个梦想脱颖而出为使命，1280元武夷山做网站,已为上家服务,为武夷山各地企业和个人服务,联系电话:028-86922220

polyline元素是SVG的一个基本形状，用来创建一系列直线连接多个点。典型的一个polyline是用来创建一个开放的形状，最后一点不与第一点相连。

一、SVG  画直线

案例

一些简单的常用SVG 画直线。

示例

 
 
 
 
      
  
  
  
  1.  
    2.   
  
  
  
  2.  
    3.   
  
  
  
  3.    
    4.   
  
  
  
  4.     项目 
    5.   
  
  
  
  5.      
    6.   
  
  
  
  6.        
    7.   
  
  
  
  7.        
    8.   
  
  
  
  8.        
    9.   
  
  
  
  9.        
    10.   
  
  
  
  10.      
    11.   
  
  
  
  11.    
    12.   
  
  
  
  12.  
    13.

运行后直线效果如下 :

代码解析 ：

直线起始点由x1和y1属性设置的点处，直线终点由x2和y2属性设置的点处，该style属性设置笔划（线条）的颜色和粗细。

二、SVG  画曲折线

1. 折线

折线示例代码如下:

示例

 
 
 
 
      
  
  
  
  1.  
    2.   
  
  
  
  2.  
    3.   
  
  
  
  3.    
    4.   
  
  
  
  4.     项目 
    5.   
  
  
  
  5.      
    6.   
  
  
  
  6.        
    7.   
  
  
  
  7.  
    8.   
  
  
  
  8.      
    9.   
  
  
  
  9.    
    10.   
  
  
  
  10.  
    11.

运行后效果如下:

2. 绘制三角形

示例代码如下:

示例

 
 
 
 
      
  
  
  
  1.  
    2.   
  
  
  
  2.  
    3.   
  
  
  
  3.    
    4.   
  
  
  
  4.     项目 
    5.   
  
  
  
  5.      
    6.   
  
  
  
  6.  
    7.   
  
  
  
  7.        
    8.   
  
  
  
  8.      
    9.   
  
  
  
  9.    
    10.   
  
  
  
  10.  
    11.

运行后效果预览图:

多条线由点标识。

每个点在points属性中均以x，y列出。此示例有3个点，它们定义了一个三角形。将3个点用线连接起来，然后填充。默认的填充颜色是黑色。

3. 绘制一个填充绿色的三角形

示例代码如下:

示例

 
 
 
 
      
  
  
  
  1.  
    2.   
  
  
  
  2.  
    3.   
  
  
  
  3.    
    4.   
  
  
  
  4.     项目 
    5.   
  
  
  
  5.      
    6.   
  
  
  
  6.  
    7.   
  
  
  
  7.         
  
  
  
  8.                fill: #33cc33;" /> 
    9.   
  
  
  
  9.      
    10.   
  
  
  
  10.    
    11.   
  
  
  
  11.  
    12.

运行后效果预览图:

已经注意到，三角形中只有两条线是用描边颜色（深绿色）绘制的。原因是，仅绘制了列出的点之间的线。没有画回第一点的线。为此，points再次将第一个点添加到属性中。

如下所示:

 
 
 
 
      
  
  
  
  1.  
    2.   
  
  
  
  2.  
    3.   
  
  
  
  3.    
    4.   
  
  
  
  4.     项目 
    5.   
  
  
  
  5.      
    6.   
  
  
  
  6.  
    7.   
  
  
  
  7.        
    8.   
  
  
  
  8.      
    9.   
  
  
  
  9.    
    10.   
  
  
  
  10.  
    11.

运行的图像结果如下：

该style属性设置笔划（线条）的颜色和粗细以及填充颜色。

三、总结

本文基于Html基础，使用SVG画不一样的线，画出不一样图形。SVG 元素画直线，polyline元素创建一个开放的形状，最后一点不与第一点相连。实现画曲线的效果，以及在实际开发项目中需要注意的点，遇到的一些难点， 都提供了一些有效的解决方案。

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

代码很简单，希望能够帮助读者更好的去学习SVG。

 本文转载自微信公众号「前端进阶学习交流」，可以通过以下二维码关注。转载本文请联系前端进阶学习交流公众号。

当前名称：一篇文章教会你使用SVG 画线
文章出自：http://www.shufengxianlan.com/qtweb/news47/106097.html

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

广告

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

猜你还喜欢下面的内容

网站导航知识

分类信息网站

定制级高端网站建设　　 　眉山网站建设　　 　都江堰做网站　　 　成都众诚伟业　　 　高端网站设计推广　　 　产品包装设计　　 　成都响应式网站建设　　 　全网营销　　 　宜宾网站设计　　 　电信成都枢纽中心　　 　成都网站改版公司　　 　防护网厂　　 　普特斯腐植酸　　 　成都模板网站　　 　绵阳网站制作公司　　 　微信小程序开发　　 　网站推广　　 　梓潼网站设计　　 　橡塑保温板　　 　攀枝花网站建设