特别感谢媳妇对我工作的大力支持!
——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之Element.marker()

Element.marker(x, y, width, height, refX, refY)

利用当前元素创建一个<marker>元素。为了创建这个标记,你需要指定边界矩阵以及参考点。

SVG <marker>元素被用来表示线或路径的开始、中间以及结束。例如,你可以使用一个圆或正方形标记作为路径的开始,然后一个三角标记作为路径的结束。

参数

  • x 数值。创建的标记元素的x位置。
  • y 数值。创建的标记元素的y位置。
  • width 数值。创建的标记元素的高度。
  • height 数值。创建的标记元素的宽度。
  • refX 数值。参考点的x位置。也就是<marker>内部的坐标。以后会作为路径的起止点等。
  • refY 数值。参考点的y位置。

<marker>元素需要配合marker-start, marker-end, marker-mid, 以及marker属性使用。marker属性可以替换路径上的所有点,marker-mid可以替换处起止点以外的所有点。

返回值

元素。返回<marker>元素。

使用

<svg id="svg" width="200" height="100"></svg>
            
<input id="button" type="button" value="点击改变圈圈的顺序">
var svg = Snap("#svg");
// 圈圈
var c1 = svg.paper.circle(5, 5, 3);
// 三角
var p1 = svg.paper.path("M2,2 L2,11 L10,6 L2,2").attr({
    fill: "#000"      
});

// 变身标记
var m1 = c1.marker(0, 0, 8, 8, 5, 5), m2 = p1.marker(0, 0, 13, 13, 2, 6);

// 添加一个路径
var p2 = svg.paper.path("M10,10 L150,10 L150,90").attr({
    // 描边
    stroke: "#00f",
    strokeWidth: 1,
    fill: "none",
    // 起始标记
    markerStart: m1,
    // 结束标记
    "marker-end": m2
});

效果

生成HTML