特别感谢媳妇对我工作的大力支持!
——by zhangxinxu 2014-01-07 17:52
  1. Element
  2. Element.add()
  3. Element.after()
  4. Element.animate()
  5. Element.append()
  6. Element.asPX()
  7. Element.attr()
  8. Element.before()
  9. Element.click()
  10. Element.clone()
  11. Element.data()
  12. Element.dblclick()
  13. Element.drag()
  14. Element.getBBox()
  15. Element.getPointAtLength()
  16. Element.getSubpath()
  17. Element.getTotalLength()
  18. Element.hover()
  19. Element.inAnim()
  20. Element.innerSVG()
  21. Element.insertAfter()
  22. Element.insertBefore()
  23. Element.marker()
  24. Element.mousedown()
  25. Element.mousemove()
  26. Element.mouseout()
  27. Element.mouseover()
  28. Element.mouseup()
  29. Element.parent()
  30. Element.pattern()
  31. Element.prepend()
  32. Element.remove()
  33. Element.removeData()
  34. Element.select()
  35. Element.selectAll()
  36. Element.stop()
  37. Element.toDefs()
  38. Element.toString()
  39. Element.touchcancel()
  40. Element.touchend()
  41. Element.touchmove()
  42. Element.touchstart()
  43. Element.transform()
  44. Element.unclick()
  45. Element.undblclick()
  46. Element.undrag()
  47. Element.unhover()
  48. Element.unmousedown()
  49. Element.unmousemove()
  50. Element.unmouseout()
  51. Element.unmouseover()
  52. Element.unmouseup()
  53. Element.untouchcancel()
  54. Element.untouchend()
  55. Element.untouchmove()
  56. Element.untouchstart()
  57. Element.use()
  58. Fragment
  59. Fragment.select()
  60. Fragment.selectAll()
  61. Matrix
  62. Matrix.add()
  63. Matrix.clone()
  64. Matrix.invert()
  65. Matrix.rotate()
  66. Matrix.scale()
  67. Matrix.split()
  68. Matrix.toTransformString()
  69. Matrix.translate()
  70. Matrix.x()
  71. Matrix.y()
  72. Paper
  73. Paper.circle()
  74. Paper.el()
  75. Paper.ellipse()
  76. Paper.filter()
  77. Paper.g()
  78. Paper.gradient()
  79. Paper.group()
  80. Paper.image()
  81. Paper.line()
  82. Paper.path()
  83. Paper.polygon()
  84. Paper.polyline()
  85. Paper.rect()
  86. Paper.text()
  87. Paper.toString()
  88. Set
  89. Set.clear()
  90. Set.exclude()
  91. Set.forEach()
  92. Set.pop()
  93. Set.push()
  94. Set.splice()
  95. Snap
  96. Snap()
  97. Snap.Matrix()
  98. Snap.ajax()
  99. Snap.angle()
  100. Snap.animate()
  101. Snap.animation()
  102. Snap.color()
  103. Snap.deg()
  104. Snap.filter
  105. Snap.filter.blur()
  106. Snap.filter.brightness()
  107. Snap.filter.contrast()
  108. Snap.filter.grayscale()
  109. Snap.filter.hueRotate()
  110. Snap.filter.invert()
  111. Snap.filter.saturate()
  112. Snap.filter.sepia()
  113. Snap.filter.shadow()
  114. Snap.format()
  115. Snap.fragment()
  116. Snap.getElementByPoint()
  117. Snap.getRGB()
  118. Snap.hsb()
  119. Snap.hsb2rgb()
  120. Snap.hsl()
  121. Snap.hsl2rgb()
  122. Snap.is()
  123. Snap.load()
  124. Snap.parse()
  125. Snap.parsePathString()
  126. Snap.parseTransformString()
  127. Snap.path
  128. Snap.path.bezierBBox()
  129. Snap.path.findDotsAtSegment()
  130. Snap.path.getBBox()
  131. Snap.path.getPointAtLength()
  132. Snap.path.getSubpath()
  133. Snap.path.getTotalLength()
  134. Snap.path.intersection()
  135. Snap.path.isBBoxIntersect()
  136. Snap.path.isPointInside()
  137. Snap.path.isPointInsideBBox()
  138. Snap.path.map()
  139. Snap.path.toAbsolute()
  140. Snap.path.toCubic()
  141. Snap.path.toRelative()
  142. Snap.plugin()
  143. Snap.rad()
  144. Snap.rgb()
  145. Snap.rgb2hsb()
  146. Snap.rgb2hsl()
  147. Snap.select()
  148. Snap.selectAll()
  149. Snap.snapTo()
  150. mina()
  151. mina()
  152. mina.backin()
  153. mina.backout()
  154. mina.bounce()
  155. mina.easein()
  156. mina.easeinout()
  157. mina.easeout()
  158. mina.elastic()
  159. mina.getById()
  160. mina.linear()
  161. mina.time()

支付鼓励

Snap.svg demo之Paper.path()

Paper.path([pathString])

画路径

参数

  • pathString SVG格式路径字符串。

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

"M10,20L30,40"

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

  1. M及其参数(10, 20);
  2. L及其参数(30, 40)

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

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

命令名称参数
Mmoveto  移动到(x y)+
Zclosepath  关闭路径(none)
Llineto  画线到(x y)+
Hhorizontal lineto  水平线到x+
Vvertical lineto  垂直线到y+
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-flag sweep-flag x y)+
RCatmull-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

使用2

<svg id="svg" width="800" height="600"></svg>
var svg2 = Snap("#svg2");
var c = svg.paper.path("M0,300 Q200,50 400,300 T800,300").attr({
    stroke: "#000",
    strokeWidth: 5,
    fill: "#fff"
});
// 画一条比较复杂的曲线

效果