目录
当前位置: 首页 > 文档资料 > Snap.svg 英文文档 >

Paper.path([pathString])

优质
小牛编辑
127浏览
2023-12-01

Creates a <path> element using the given string as the path's definition

Parameters

  1. pathStringstringpath string in SVG format

Path string consists of one-letter commands, followed by comma seprarated arguments in numerical form. Example:

"M10,20L30,40"

This example features two commands: M, with arguments (10, 20) and L with arguments (30, 40). Uppercase letter commands express coordinates in absolute terms, while lowercase commands express them in relative terms from the most recently declared coordinates.

Here is short list of commands available, for more details see SVG path string format or article about path strings at MDN.

CommandNameParameters
Mmoveto(x y)+
Zclosepath(none)
Llineto(x y)+
Hhorizontal linetox+
Vvertical linetoy+
Ccurveto(x1 y1 x2 y2 x y)+
Ssmooth curveto(x2 y2 x y)+
Qquadratic Bézier curveto(x1 y1 x y)+
Tsmooth quadratic Bézier curveto(x y)+
Aelliptical arc(rx ry x-axis-rotation large-arc-flagsweep-flag x y)+
RCatmull-Rom curveto*x1 y1 (x y)+

  • Catmull-Rom curveto is a not standardSVG command and added to make life easier.
  • Note: there is a special case when a path consists of only three commands: M10,10R…z. In this case the path connects back to its starting point.

    Usage

    var c = paper.path("M10 10L90 90");
    // draw a diagonal line:
    // move to 10,10, line to 90,90