一篇文章带你了解SVG 路径

path元素是用来定义形状的通用元素。所有的基本形状都可以用path元素来创建。SVG 元素用于绘制由直线，圆弧，曲线等组合而成的高级形状，带或不带填充。该 元素可能是所有元素中最先进，最通用的SVG形状。

黄陵ssl适用于网站、小程序/APP、API接口等需要进行数据传输应用场景，ssl证书未来市场广阔！成为创新互联的ssl证书销售渠道，可以享受市场价格4-6折优惠！如果有意向欢迎电话联系或者加微信：18980820575（备注：SSL证书合作）期待与您的合作！

一、弧线   使用元素绘制圆弧是使用A和a命令完成的。与直线类似，大写命令(A)使用绝对坐标作为其终点，而小写命令(A)使用相对坐标(相对于起点)。 例  

 
 
 
 
  
  
  
  
  
  
  
  
    xmlns:xlink="http://www.w3.org/1999/xlink"> 
  
  
  
  
 
  
  
  
  
      
  
  
  
          style="stroke:#660000; fill:none;"/> 
  
  
  
  
 
 
 
 

运行结果:

例2：  

运行结果:

1. 二次贝塞尔曲线   还可以使用元素绘制二次Bezier曲线。绘制二次Bezier曲线是使用Q和Q命令完成的。与直线一样，大写命令(Q)使用绝对坐标作为其终点，而小写命令(q)使用相对坐标(相对于起点)。下面是一个简单的二次曲线示例：   示例  

 
 
 
 
  
  
  
  
  
  
  
  
    xmlns:xlink="http://www.w3.org/1999/xlink">  
  
  
  
      style="stroke: #006666; fill:none;"/> 
  
  
  
  
 
 
 
 

运行结果:

该示例绘制一条二次 Bezier 曲线，从50,50到点100,100，控制点为50,200。控制点是 Q 命令上设置的两个参数中的第一个。   控制点像磁铁一样拉动曲线。曲线上的一个点离控制点越近，控制点就越往里拉，这意味着它离控制点越近。以下是一些在图像上绘制控制点的示例：

实际上，如果从起点画一条线到控制点，再画一条从控制点到终点的线，那么从第一条线的中间到第二条线的中间就是曲线的切线。

2. 三次贝塞尔曲线   使用C和c命令绘制三次贝塞尔曲线。三次贝塞尔曲线类似于二次贝塞尔曲线，除了它们具有两个控制点而不是一个控制点。与线条一样，大写命令(C)使用绝对坐标作为其终点，小写命令(c)使用相对坐标（相对于起点）:  

 
 
 
 
  
  
  
  
  
  
  
  
  style="stroke: #006666; fill:none;"/> 
 
 
 

这是绘制了控制点的结果图像，运行后结果如下。

二、闭合路径   该元件具有用于关闭所述通路，这意味着从绘制的最后一个点回到第一点的线的快捷命令。该命令是Z（或z-大写和小写闭合路径命令之间没有区别）。   示例  

 
 
 
 
  
  
  
  
  
  
  
  
    xmlns:xlink="http://www.w3.org/1999/xlink">  
  
  
  
    style="stroke: #006666; fill:none;"/> 
  
  
  
  
 
 
 
 

运行结果:

 
三、组合命令   可以在同一元素中组合path命令。   示例  

此示例绘制一条直线、一条圆弧、一条二次Bezier曲线，并以一条回到起点的直线闭合路径结束。以下是生成的图像：

四、填充路径   可以使用fill CSS属性填充路径。下面是一个实例：   示例  

 
 
 
 
  
  
  
  
  
  
  
  
    xmlns:xlink="http://www.w3.org/1999/xlink">  
  
  
  
      style="stroke: #ff0000; stroke-width: 2px; fill  : #ccccff;"/> 
  
  
  
  
 
 
 
 

运行结果:

注： 形状的内部是如何用红色填充的。
五、总结 本文基于SVG基础，介绍了如何画曲线，重点介绍了塞尔曲线的画不规则图像，二次贝塞尔曲线，三次贝塞尔曲线的实际应用 ，通过项目，详细介绍了闭合路径， 填充路径的实际应用。 欢迎大家积极尝试，有时候看到别人实现起来很简单，但是到自己动手实现的时候，总会有各种各样的问题，切勿眼高手低，勤动手，才可以理解的更加深刻。 代码很简单，希望能够帮助你更好的学习。

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

本文名称：一篇文章带你了解SVG 路径
当前链接：http://www.csdahua.cn/qtweb/news39/97239.html

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

广告

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