_{Snap.svg demo之}Paper.path()

Paper.path([pathString])

脸上贴图片。

参数

• pathString SVG格式路径字符串。

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

"M10,20L30,40"

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

1. M及其参数(10, 20);
2. 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命令，这里添加是为了让生活更美好。

注意：这里有个特别的案例。当一个路径仅包含3个命令：M10, 10R...z. 这种情况下，路径的连接会回到起始点。

使用

<svg id="svg" width="100" height="100"></svg>

var svg = Snap("#svg");
var c = svg.paper.path("M10 10L90 90").attr({
    stroke: "#000",
    strokeWidth: 5	
});
// 画一条对角线:
// 移动到 10,10, 画线至 90,90

效果

生成HTML