使用SVG画图（基本使用 + 贝塞尔曲线等一些重要画图方法）

最新推荐文章于 2021-10-27 08:59:19 发布

weixin_33859231

最新推荐文章于 2021-10-27 08:59:19 发布

阅读量1.6k

点赞数 1

原文链接：https://segmentfault.com/a/1190000014620252

版权

本文介绍了SVG的基本概念，如画板、画布和对齐方式，并详细讲解了贝塞尔曲线，包括基本说明、使用方法以及如何实现光滑过渡。SVG中的path标签用于绘制路径，通过d属性配合指令如C/c、Q/q创建贝塞尔曲线。此外，文章还探讨了二次和三次贝塞尔曲线的补充规则。

摘要由CSDN通过智能技术生成

作者：心叶
时间：2018-04-26 22:25

首先说明一下：SVG只是一个用类似Canvas的感觉，通过有点像CSS的方法去实现矢量图绘制的XML文件。

一基本概念

viewport

你把SVG看成一个普通的标签，viewport就是代表这个标签的实际大小。

viewbox=(x,y,width,height)

你可以认为viewport是画板，viewbox是画布，你是在画布上画画的，可是画布需要固定在画板上，通过svg上面的viewBox属性可以设置画布位置和大小。

默认情况下画布大小和画板是一样的，画布里面的具体画的东西的尺寸和这里的设置有关，比如画布大小是200px200px，画布大小是100px100px，那么你在里面画一条长度为10（不可以带单位）的线条，实际长度就是20px，以此类推。

还有一点需要注意的是，viewbox设置的位置，也就是前二个参数，它是确定画纸移动一下，保证画布的（0,0)位置和自己的（x,y）位置对齐，注意这里的单位采用的是svg内部尺寸计算方法。

preserveAspectRatio=<align> [<meetOrSlice>]

定义画布和画布的相互对齐方式，好吧，我想起了垂直对齐

关注