Paper.path([pathString])

创建路径元素


参数

pathString SVG格式路径字符串。

路径字符串是包含一个字母的命令,以逗号分隔,参数为数值形式。 例如:

"M10,20L30,40"

上面这个例子包含两个命令:

  • M 及其参数(10, 20);
  • L 及其参数(30, 40)

大写的命令字母的坐标是绝对形式;而小写的命名是相对形式,相对于最近一次声明的坐标。

下面这个简短的列表为可用命令,具体内容可以参见W3 SVG路径字符串格式MDN上关于路径字符串的文章。

命令 名称 参数
M moveto  移动到 (x y)+
Z closepath 关闭路径 (none)
L lineto 画线到 (x y)+
H horizontal lineto 水平线到 x+
V vertical lineto  垂直线到 y+
C curveto  三次贝塞尔曲线到 (x1 y1 x2 y2 x y)+
S smooth curveto  光滑三次贝塞尔曲线到 (x2 y2 x y)+
Q quadratic Bézier curveto  二次贝塞尔曲线到 (x1 y1 x y)+
T smooth quadratic Bézier curveto  光滑二次贝塞尔曲线到 (x y)+
A elliptical arc  椭圆弧 (rx ry x-axis-rotation large-arc-flag sweep-flag x y)+
R Catmull-Rom curveto*  Catmull-Rom曲线 x1 y1 (x y)+

Catmull-Rom曲线不是标准的SVG命令,这里添加是为了让生活更美好。 最简单的方法是利用GUI的矢量图工具(如:AI)导出Path


返回值

使用
<svg id="svg" width="100" height="100"></svg>
var svg = Snap("#svg");
var c = svg.paper.path("M5 5L100 60").attr({
    stroke: "#000",
    strokeWidth: 5  
});
// 画一条对角线:
// 移动到 5,5, 画线至 100,60