svg path

• SVG 可缩放矢量图形（Scalable Vector Graphics）
• SVG 使用 XML 格式定义图形
• SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失

<!-- svg.svg 格式文件 -->
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_2" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="841.89px" height="595.275px"
viewBox="0 0 841.89 595.275" enable-background="new 0 0 841.89 595.275" xml:space="preserve">
  <!-- 直线 -->
  <path d="M800 300 L800 200" fill="green" stroke="green" stroke-width="2"/>

  <!-- 半圆 -->
  <path d="M400 325 A 200 200 0 0 1 800 325" fill="red"/>

  <!-- 环形 -->
  <path d="M200 200 A 300 300 0 0 1 600 200 L500 300 A 200 200 0 0 0 300 300"
  fill="red" stroke="red" stroke-width="2" />
  <path d="M200 200 A 200 200 0 0 1 300 300 L250 300 A250 300 0 0 0 200 250" fill="green" />
</svg>

注释：以上所有命令均允许小写字母。大写表示绝对定位，小写表示相对定位。

• Moveto 移动画笔到起始点; M x,y 绝对坐标，分别代表水平/垂直坐标

• Lineto 绘制直线; L x, y 直线结束点坐标;

• Arcto 绘制弧曲线路径; A rx ry xAxisRotate LargeArcFlag SweepFlag x y

  1. rx 和 ry 分别是 x 和 y 方向的半径（绘制圆弧时，rx 和 ry 相等）
  2. xAxisRotate 是此段弧所在的 x 轴与水平方向的夹角，即 x 轴的逆时针旋转角度，负数代表顺时针转动的角度（半圆设置此属性无效）
  3. LargeArcFlag 的值确定是要画小弧或者大弧，0 表示画小弧（即画两点之间弧长最小的弧），1 表示画大弧（当弧度大于 Math.PI 时需要画大弧）
  4. SweepFlag 使用来确定画弧的方向，0 逆时针方向，1 顺时针方向
  5. x 和 y 是目的地的坐标

• ClosePath 闭合路径 语法是Z或者z;

| 半圆

<path d="M630 325 A 50 50 0 0 1 530 325" stroke="black" fill="green" stroke-width="2" fill-opacity="0.5"/>

M630 325 表示将点移动到此处；

A 表示画笔从当前的点绘制一段圆弧到点(x,y)

50 50 是两个半轴长度

0 0 1 表示控制旋转角度，等。详见博客http://blog.csdn.net/dusea/article/details/49492167

530 325 表示终点坐标。

这里画个半圆，因此终点的y值一致。

注意控制50 50是两个半轴长度，如果超过了起点和终点之间的长度，就会画成一段弧形。

| Echarts 自定义图例 Icon ：

半圆：’path://M630 325 A 200 200 0 0 1 1030 325’ 环形：’path://M200 200 A300 300 0 0 1 600 200 L500 300 A200 200 0 0 0 300 300’ 矩形：’path://M250 150 L236 150 L236 176 L250 176 L250 150 Z’

| 参考

SVG W3C教程