利用SVG中path实现平滑曲线

前言：

SVG中实现直线很简单，但是实现曲线稍略显复杂！在实际的开发场景中直线不能满足很多的需求，如下图所示各个图形之间采用曲线连接，如果换成直线整个风格就略显僵硬，所以曲线在很多场合下还是比较适用的。

带箭头的直线如何实现

直线采用SVG中的line元素，如下所示：

<line x1="0" y1="0" x2="100" y2="200"></line>

上面的代码很简洁，(x1,y1)表示起点的坐标，(x2,y2)表示终点的坐标。那么箭头该如何表示呢？

这里需要用到另外一个重要的元素marker。marker标记可以放在直线，折线，多边形和路径的顶点。这些元素可以使用maeker属性的"marker-start"，“marker-mid"和"marker-end”，继承默认情况下或定义的标记的URI，你必须先定义标记，然后才可以通过其URI引用。

<defs> 
  <marker id="markerArrow" markerWidth="13" markerHeight="13" refx="2" refy="6" orient="auto"> 
    <path d="M2,2 L2,11 L10,6 L2,2"style="fill: #000000;" /> 
  </marker> 
</defs>

再来把刚刚的直线的代码修改一下即可：

<line x1="0" y1="0" x2="100" y2="200" style="stroke:red;marker-end: url(#markerArrow);"></line>

其效果如下所示：

带箭头的曲线如何实现

箭头的实现与上面的一样仍然采用marker,只不过曲线的实现采用path。

path元素的简介

path元素通常用来定义路径。它可以被用来描述直线、曲线、折线、多边形、圆等元素。

path元素中有一个非常重要的属性’d’。 'd’属性是一个字符串，它描述了要创建的路径位置和形状。 'd’属性包含多个连续的指令， 如Move（移动）、画线、画曲线、画圆弧和曲线等等。 每个指令都是一个字母，后面跟着参数。

如下所示为一个多边形的例子：

<path d="M250 150 L150 350 L350 350 Z" />

上面的例子定义了一条路径，它开始于位置 250 150，到达位置 150 350，然后从那里开始到 350 350，最后在 250 150 关闭路径，即一个三角形！如下所示：

具体可以参考http://www.w3school.com.cn/svg/svg_path.asp

path如何实现曲线

上面提到path元素有一个属性d，属性d中包含很多属性，如下图所示：

实现曲线属性d中一般包含指令M和C（当然也可以使用S、Q、T等）。先上代码与图形直观感受一下：

<path class="link" d="M 10,234 C 177,234 177,341 344,341" style="fill:none;stroke:#ccc;stroke-width=6px;cursor: default;marker-end: url(#markerArrow);">

其图形如下所示：

分析：
1）M 10,234 表示画笔的起始点；
2） C表示画笔从起始点绘制一段三次贝塞尔曲线，(177,234) 和(177 341)表示为三次贝塞尔曲线的两个控制点，(344,341)表示曲线的终点

贝塞尔曲线

贝塞尔曲线是什么鬼？？看到两篇关于贝塞尔曲线的博客，感觉不错，建议直接参考该博客：
[1] http://www.cnblogs.com/jay-dong/archive/2012/09/26/2704188.html
[2] http://justcoding.iteye.com/blog/2226354

一些思考

在进行曲线的绘制时，我们通常只知道起点与终点，要想绘制三次贝塞尔曲线还需要提供两个控制点。那这两个控制点怎么来呢？

如果只提供起点与终点，是无法算出两个控制点的，两个控制点的选取需要根据实际项目需求进行确定。如下两个曲线起点与终点相同，但是两个控制点不同，其效果也不同：

<path class="link" d="M 10,234 C 177,234 177,341 344,341" style="fill:none;stroke:#ccc;stroke-width=6px;cursor: default;marker-end: url(#markerArrow);"/> 
<path class="link" d="M 10,234 C 0,234 150,341 344,341" style="fill:none;stroke:red;stroke-width=6px;cursor: default;"/>

其效果如下：