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之Matrix.add()

Matrix.add(…)

给现有矩阵再添加一个矩阵。

参数

  • a 数值。
  • b 数值。
  • c 数值。
  • d 数值。
  • e 数值。
  • f 数值。

以上a~f的矩阵参数含义可参见理解CSS3 transform中的Matrix(矩阵)一文中的说明。

或者

  • matrix 对象。矩阵对象。

返回值

对象。元素。

使用

<svg id="svg" width="120" height="120"></svg>
var svg = Snap("#svg");
// 画个圈圈
var c = svg.paper.circle(50, 50, 40);
// 当前矩阵
var m1 = new Snap.Matrix(1,0,0,1,20,20);
// 圈圈应用矩阵变换 - 位移(20, 20)
c.transform(m1.toTransformString());

// 事件
if (document.addEventListener) {
    document.querySelector("#button").addEventListener("click", function() {
        // 矩阵组合
        m1.add(1,0,0,1,-20,-20);
        // 圈圈再次应用矩阵变换 - 位移(-20, -20)
        c.transform(m1.toTransformString());
    });
}

效果