SVG <path>


SVG 路径 - <path>

<path> 元素用于定义一个路径。

下面的命令可用于路径数据:

  • M = moveto
  • L = lineto
  • H = horizontal lineto
  • V = vertical lineto
  • C = curveto
  • S = smooth curveto
  • Q = quadratic Bézier curve
  • T = smooth quadratic Bézier curveto
  • A = elliptical Arc
  • Z = closepath

注意:以上所有命令均允许小写字母。大写表示绝对定位,小写表示相对定位。


实例 1

上面的例子定义了一条路径,它开始于位置150 0,到达位置75 200,然后从那里开始到225 200,最后在150 0关闭路径。

下面是SVG代码:

实例

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <path d="M150 0 L75 200 L225 200 Z" />
</svg>

(右键单击SVG图形预览源)。

复杂吗?是的!!由于在绘制路径时的复杂性,强烈建议使用SVG编辑器来创建复杂的图形。