SVG-曲线

曲线就是 Web 画图中常见的 Bezier Curves(贝塞尔),Arcs,several Bezier curves(很多贝塞尔 - .-)等。

我们简单看一下:

C/c

这是正统的贝塞尔曲线,需要 4 个参考点,下图应该说比较确切表示了二次贝塞尔所需要的点。所以,C/c 需要定义三个点。

基本格式为:

例如:

S/s

该标识符实际上使用来表示一个反射贝塞尔,即,在原有贝塞尔上再加一段贝塞尔曲线,所以,S/s 一般和 C/c 一起使用。

基本格式为:

实际样式图为:

相当于原有的贝塞尔曲线的最后一段进行反向延长并对称。然后加上新定义的一段限制曲线。

具体实例为:

Q/q

该标识符是用来定义二次(quadratic)贝塞尔曲线,该曲线相当于上面传统的贝塞尔来说,更加简单,它只需要定义三个点,即可完整一个贝塞尔曲线,具体作图过程如下:

基本格式为:

即为图上点, P1(x1,y1),P2(x,y)

起始点为 M 定义的点,例如:

T/t

该标识符和 S 差不多,也是一个贝塞尔曲线的延长。相当于原曲线的控制点 P1 相当于 end point P2 做对称,然后,只需要定义一个终点即可,即,T/t 只需要定义贝塞尔曲线里面的终点即可:

所以,简单来说,C/S,Q/T 是两两搭配一起使用的。在使用的时候,千万不要搞混即可。

你可能感兴趣的:(SVG-曲线)