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

lement.pattern(x, y, width, height)

利用当前元素创建一个<pattern>元素。为了创建这个图案,你需要指定图案矩阵。

<pattern>容易让人困惑,但同时也很强大。在SVG中,<pattern>被用来填充图形,填充的图案可以来自SVG图片,或者位图图片。

SVG图案填充很像我们在photoshop中使用的图案填充,如"tiles"(拼贴)等。

参数

  • x 字符串或数值。
  • y 字符串或数值。
  • width 字符串或数值。
  • height 字符串或数值。

<pattern>元素可以通过fill属性使用。

返回值

元素。返回<pattern>元素。

使用

<svg id="svg" width="250" height="250"></svg>
            
<input id="button" type="button" value="点击改变圈圈的顺序">
var svg = Snap("#svg");
var p = svg.paper.path("M10-5-10,15M15,0,0,15M0-5-20,15").attr({
    fill: "none",
    stroke: "#beceeb",
    strokeWidth: 5
}).pattern(0, 0, 10, 10),
c = svg.paper.circle(120, 120, 100);
c.attr({
    // 斜纹图案填充
    fill: p
});

效果

生成HTML