【前端SVG】HTML中SVG实现path路径绘制
前言
在学习了基本图形的绘画后,我们将更深入的学习
SVG
中的path
路径绘制,
小写命令符的区别
在上一篇文章中的两个例子,我们的命令都是使用大写字母的方式来绘制我们的图形的,其实也可以使用小写字母的方式来绘画。但,小写字母是相对命令,它们的参数不是指定一个明确的目标,而是表示相对于它前面的点需要移动多少距离。例如前面的示例,画的是一个200*100
的矩形,用相对命令可以这样描述:
<path d="M10 10 h 200 v 80 h -200 Z" fill="red"/>
以上代码,我们先将画笔定在了10,10
处,使用L命令的简写方法,从这里开始,将画笔往右边移动200px
,构成一条水平线,再向下方移动100px
,再向左边移动100px
,最后使用Z闭合命令将图形闭合起来。这样就形成一个200*100
的矩形了。
曲线的绘画
在前面的path
例子,你可能会有这样子的疑问:我们可以通过rect
、polyline
、 polygon
标签实现,这样子更简单。为什么要使用path
呢?
如果你只是画直线,那么其他元素可能会更好用,但是,path
却是众多开发者在SVG
绘制中经常用到的。据我所知,它们之间不存在性能上的优劣。但是通过脚本生成path
可能有所不同,因为另外两种方法只需要指明点,而path
在这方面的语法会更复杂一些。
三次贝塞尔曲线
三次贝塞尔曲线需要定义一个点和两个控制点,所以用C
命令创建三次贝塞尔曲线,需要设置三组坐标参数:
C x1 y1, x2 y2, x y
<path d="M10 10 C 20 30, 40 30, 50 10" stroke="black" fill="transparent"/>
贝塞尔曲线命令也有简写方式为S
,我们来看看S
命令的语法:
<path d="M10 80 Q 95 10 180 80 S 265 150 360 80" stroke="black" fill="transparent"/>
S
命令跟在一个C
或S命令后面,则它的第一个控制点会被假设成前一个命令曲线的第二个控制点的中心对称点。如果S
命令单独使用,前面没有C
或S
命令,那当前点将作为第一个控制点。如果S
命令单独使用,前面没有C
命令或者另一个S
命令,那么它的两个控制点就会被假设为同一个点。
二次贝塞尔曲线
二次贝塞尔曲线只需要一个控制点,用于确定起点和终点的曲线斜率。需要两组参数,控制点和终点坐标:
Q x1 y1, x y
<path d="M10 80 Q 95 10 180 80" stroke="black" fill="transparent"/>
像三次贝塞尔曲线一样,它也有简写的命令,叫T
,可以通过更简短的参数,延长二次贝塞尔曲线。T
会通过前一个控制点,推断出一个新的控制点。
T x y
<path d="M10 80 Q 95 10 180 80 T 340 80" stroke="black" fill="transparent"/>
弧形
弧形可以视为圆形或椭圆形的一部分,命令A
是绘制一条曲线的命令。我们看看它都需要哪一些参数
A rx ry x-axis-rotation large-arc-flag sweep-flag x y
分别对应的是x
轴半径、y
轴半径、弧形旋转、角度大小、弧线方向
我们看看下面的这个例子
<path d="M10 315
L 110 215
A 30 50 -45 0 1 215.1 109.9
L 315 10" stroke="black" fill="red" stroke-width="2"/>
最后
本篇文章讲述了SVG
路径中如何绘制贝塞尔曲线、弧形,相比本系列的前三篇文章理解起来可能会复杂,如果你熟悉代数或者微积分的话,会更容易理解。
感谢你的阅读!
😀😀 关注我,不迷路! 😀😀
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanekje
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
怎样阻止微信小程序自动打开
PHP中文网 06-13 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01