初识SVG(五)

4.1.Path

<path> 元素用于定义一个路径。
下面的命令可用于路径数据：

• M = moveto
  • M x y：移动画笔，后面如果有重复参数，会被当做是L命令处理
• L = lineto
  • L x y：绘制直线到指定位置
• H = horizontal lineto
  • H x：绘制水平线到指定位置
• V = vertical lineto
  • V y：绘制竖直线到指定位置
• C = curveto
  • C x1 y1 x2 y2 x y：从当前位置绘制三次贝塞尔曲线到指定位置
• S = smooth curveto
  • S x2 y2 x y：从当前位置光滑绘制三次贝塞尔曲线到指定位置
• Q = quadratic Bézier curve
  • Q x1 y1 x y：从当前位置绘制二次贝塞尔曲线到指定位置
• T = smooth quadratic Bézier curveto
  • T x y：从当前位置光滑绘制二次贝塞尔曲线到指定位置
• A = elliptical Arc
  • A rx ry xr laf sf x y：绘制弧线
    • rx:弧线所在椭圆的x半轴长
    • ry:弧线所在椭圆的y半轴长
    • xr:弧线所在椭圆的长轴角度
    • laf:是否选择弧线较长的那一段弧
    • sf:是否选择逆时针方向的那一段弧
    • x，y:弧的终点位置
• Z = closepath
  • Z：闭合当前路径

---

使用规律：

• 以上所有命令均允许小写字母。大写表示绝对定位，小写表示相对定位。
• 最后的参数表示最终要到达的位置
• 上一个命令结束的位置就是下一个命令开始的位置
• 命令可以重复参数表示执行同一条命令(M除外)

---

简单命令示例：

<svg width="100px" height="100px" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <path d="M10 10 H 90 V 90 H 10 L 10 10"/> 
    <!-- Points -->
    <circle cx="10" cy="10" r="2" fill="red"/>
    <circle cx="90" cy="90" r="2" fill="red"/>
    <circle cx="90" cy="10" r="2" fill="red"/>
    <circle cx="10" cy="90" r="2" fill="red"/>
</svg>

效果：

---

弧线命令：
xr其实表示了一个旋转角度，而ry，rx表示了长轴与短轴的大小，这就已经确定了椭圆的形状，以下是具体的图示。


代码示例：

<svg width="320px" height="320px" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <path d="M 100 100 A 30 50 0 0 1 200 100 " stroke="black" fill="green" stroke-width="2" fill-opacity="0.5"/>
</svg>

效果图：

注：暂时没空了，贝塞尔曲线留待以后补充