一篇文章带你了解SVG <path> 路径

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

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

一、弧线
 
使用<path>元素绘制圆弧是使用A和a命令完成的。与直线类似,大写命令(A)使用绝对坐标作为其终点,而小写命令(A)使用相对坐标(相对于起点)。
 
  1. <svg xmlns="http://www.w3.org/2000/svg" 
  2.     xmlns:xlink="http://www.w3.org/1999/xlink"
  3.  
  4.     <path d="M50,50             A30,50 0 0,1 100,100" 
  5.           style="stroke:#660000; fill:none;"/> 
  6. </svg> 
运行结果:

例2:
 
  1. <svg width="500" height="120"
  2.     <path d="M40,20     A30,30 0 0,0 60,70" style="stroke: #cccc00; stroke-width:2; fill:none;"></path> 
  3.  
  4.     <path d="M40,20     A30,30 0 1,0 60,70" style="stroke: #ff0000; stroke-width:2; fill:none;"></path> 
  5.  
  6.     <path d="M40,20     A30,30 0 1,1 60,70" style="stroke: #00ff00; stroke-width:2; fill:none;"></path> 
  7.  
  8.     <path d="M40,20     A30,30 0 0,1 60,70" style="stroke: #0000ff; stroke-width:2; fill:none;"></path> 
  9.  
  10. </svg> 
运行结果:

1. 二次贝塞尔曲线
 
还可以使用<path>元素绘制二次Bezier曲线。绘制二次Bezier曲线是使用Q和Q命令完成的。与直线一样,大写命令(Q)使用绝对坐标作为其终点,而小写命令(q)使用相对坐标(相对于起点)。下面是一个简单的二次曲线示例:
 
示例
 
  1. <svg xmlns="http://www.w3.org/2000/svg" 
  2.     xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M50,50 Q50,100 100,100" 
  3.       style="stroke: #006666; fill:none;"/> 
  4. </svg> 
运行结果:

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

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

2. 三次贝塞尔曲线
 
使用C和c命令绘制三次贝塞尔曲线。三次贝塞尔曲线类似于二次贝塞尔曲线,除了它们具有两个控制点而不是一个控制点。与线条一样,大写命令(C)使用绝对坐标作为其终点,小写命令(c)使用相对坐标(相对于起点):
 
  1. <path d="M50,50 C75,80 125,20 150,50" 
  2.   style="stroke: #006666; fill:none;"/> 
这是绘制了控制点的结果图像,运行后结果如下。

二、闭合路径
 
该<path>元件具有用于关闭所述通路,这意味着从绘制的最后一个点回到第一点的线的快捷命令。该命令是Z(或z-大写和小写闭合路径命令之间没有区别)。
 
示例
 
  1. <svg xmlns="http://www.w3.org/2000/svg" 
  2.     xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M50,50 L100,50 L100,100 Z" 
  3.     style="stroke: #006666; fill:none;"/> 
  4. </svg> 
运行结果:

 
三、组合命令
 
可以在同一<path>元素中组合path命令。
 
示例
 
  1. <svg width="500" height="225"
  2.             <path d="M100,100 L150,100 a50,25 0 0,0 150,100 q50,-50 70,-170 Z" style="stroke: #006666; fill: none;"></path> 
  3. </svg> 
此示例绘制一条直线、一条圆弧、一条二次Bezier曲线,并以一条回到起点的直线闭合路径结束。以下是生成的图像:

四、填充路径
 
可以使用fill CSS属性填充路径。下面是一个实例:
 
示例
 
  1. <svg xmlns="http://www.w3.org/2000/svg" 
  2.     xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M100,100 L150,100 L150,150  Z" 
  3.       style="stroke: #ff0000; stroke-width: 2px; fill  : #ccccff;"/> 
  4. </svg> 
运行结果:

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

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

 

责任编辑:武晓燕 来源: 前端进阶学习交流
相关推荐

2020-12-11 08:39:14

SVG代码剪切

2021-02-26 20:01:57

SVG滤镜元素

2020-12-08 08:09:49

SVG图标Web

2020-12-25 09:42:51

SVGtspanSVG基础

2022-05-13 16:21:38

javascrip脚本SVG

2021-01-04 10:14:42

SVG标签元素

2021-03-26 09:57:51

SVGHtml基础SVG图像

2021-02-05 18:36:15

SVG形状属性

2021-01-01 09:18:48

SVG图像元素

2020-12-29 09:39:38

元素属性定位

2020-12-23 08:12:08

javascriptSVG脚本SVG元素

2021-02-23 06:51:16

SVGstrokeHtml基础

2020-12-04 08:40:29

SVG动画元素

2023-05-12 08:19:12

Netty程序框架

2021-06-30 00:20:12

Hangfire.NET平台

2021-01-29 18:41:16

JavaScript函数语法

2021-06-04 09:56:01

JavaScript 前端switch

2020-11-10 10:48:10

JavaScript属性对象

2021-02-02 18:39:05

JavaScript

2023-09-06 14:57:46

JavaScript编程语言
点赞
收藏

51CTO技术栈公众号