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