2018-10-22-SVG复杂路径的绘制

A/a 椭圆圆弧 （个人理解，使用相对定位更多一些，绝对定位对于定位精确点来说不太容易实现）

公司的logo中包含使用椭圆胡绘制圆的实践，大多使用了相对定位。

椭圆圆弧的参数

参数名	参数含义
rx ry	椭圆横向半径椭圆纵向半径
x-axis-rotation	绕x轴旋转角度，单位为角度数
large-arc-flag	1为大圆弧 0为小圆弧
sweep-flag	0为逆时针 1为顺时针
x y	圆弧的路径终点

在尝试过n多种方法之后，我发现a椭圆弧仅能通过两个圆弧拼接的方式去画圆，并不能直接通过一个a椭圆弧去画一个完整的圆出来，回顾它的名称才明白，a仅仅是一个弧，并非像是circle这样完整的闭合svg路径。

具体到图形上，表现如下图所示：

image.png

其中除了图表中给出的两个布尔标记位之外，剩余的参数都展示了出来。
我最初的猜想与总结是，其中绕x轴的旋转角度，是以横坐标顺时针为正值，逆时针为负值。并且经过起点与终点的椭圆有两个，如下图所示（对应了不同标记位）：

image.png

实践

image.png

// 使用正圆，相对坐标，以及顺时针画出的圆弧
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" id="svgWrap">
    <path d="M100 100 a100 100 0 0,1 100 100" stroke="#fff"/>
</svg>

image.png

// 使用正圆，绝对坐标，以及顺时针画出的圆弧
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" id="svgWrap">
    <path d="M100 100 A100 100 0 0,1 100 100" stroke="#fff"/>
</svg>

下图中，我画了三组椭圆弧，分别对应旋转角为0 30 60，取弧段长度相反的，路径绘制方向相反的三组椭圆弧。非常明显的印证了上述猜想。

image.png

<path d="M100 100 a50 100 0 0,1 100 100 " stroke="#fff" fill="transparent"/>
    <path d="M100 100 a50 100 0 1,0 100 100 " stroke="#f00" fill="transparent"/>

    <path d="M100 100 a50 100 30 0,1 100 100 " stroke="#0f0" fill="transparent"/>
    <path d="M100 100 a50 100 30 1,0 100 100 " stroke="#00f" fill="transparent"/>

    <path d="M100 100 a50 100 60 0,1 100 100 " stroke="yellow" fill="transparent"/>
    <path d="M100 100 a50 100 60 1,0 100 100 " stroke="purple" fill="transparent"/>

结论：可以对比出椭圆弧相对与绝对坐标之间的差别主要体现在最后的终点定点上，且旋转角度以顺时针为正，这与日常使用的xy坐标正好相反。

贝塞尔曲线

在路径绘制中，共有四组贝塞尔曲线可供使用，二次贝塞尔、光滑二次贝塞尔、三次贝塞尔、光滑三次贝塞尔。

首先对于贝塞尔曲线进行一个回顾，一次贝塞尔曲线仅需要两个点，一个参数t即可完成绘制。

一阶贝塞尔曲线函数：

image.png

实际上也就是一个直线段的切割，根据t值的变化，切割的状态也会发生拜年话。

image.png

二阶贝塞尔曲线函数：

image.png
image.png

三阶贝塞尔曲线函数：

image.png image.png

上述内容对于贝塞尔函数做出了一个大致的罗列介绍，在svg中最多可以画到三次。
二次贝塞尔函数

image.png

<path d="M100 100 Q150 50 200 50" stroke="#fff"/>

    <circle cx="100" cy="100" r="2" fill="red"></circle>
    <circle cx="200" cy="50" r="2" fill="red"></circle>
    <circle cx="150" cy="50" r="2" fill="red"></circle>
    <path d="M100 100 L150 50 200 50" stroke="#0f0" stroke-width="1" fill="transparent"/>

三次贝塞尔函数

image.png

 <path d="M300 300 C350 250 450 250 500 300" stroke="#fff"/>
    <circle cx="300" cy="300" r="2" fill="red"></circle>
    <circle cx="350" cy="250" r="2" fill="red"></circle>
    <circle cx="450" cy="250" r="2" fill="red"></circle>
    <circle cx="500" cy="300" r="2" fill="red"></circle>
    <path d="M300 300 L350 250 450 250 500 300" stroke="#0f0" stroke-width="1" fill="transparent"/>

最后的一些总结和回顾，以及问题

path命令的作用是什么？
在我看来，path命令的作用是通过坐标点的方式进行更为精确的定点绘图，虽然已经有众多的svg标签，例如circle rect ellipse等等，但是都是相对局限的形状，通过path我们有了更为自由精确并且多样的绘图方式。