diff options
author | wout <wout@impinc.co.uk> | 2014-01-26 18:07:58 +0100 |
---|---|---|
committer | wout <wout@impinc.co.uk> | 2014-01-26 18:07:58 +0100 |
commit | 35c3ba9130f3cea1d5b190c75ff8abd0be515255 (patch) | |
tree | 74f945c0f55651ee7f7a24002a4718470d9a8c76 /README.md | |
parent | 22212053f79344f2f11f77e699f7f307a25eb9a9 (diff) | |
download | svg.js-35c3ba9130f3cea1d5b190c75ff8abd0be515255.tar.gz svg.js-35c3ba9130f3cea1d5b190c75ff8abd0be515255.zip |
Updated README
Diffstat (limited to 'README.md')
-rw-r--r-- | README.md | 72 |
1 files changed, 58 insertions, 14 deletions
@@ -1215,6 +1215,8 @@ _This functionality requires the sugar.js module which is included in the defaul ## Masking elements + +### MaskWith The easiest way to mask is to use a single element: ```javascript @@ -1223,6 +1225,7 @@ var ellipse = draw.ellipse(80, 40).move(10, 10).fill({ color: '#fff' }) rect.maskWith(ellipse) ``` +### Mask But you can also use multiple elements: ```javascript @@ -1247,25 +1250,34 @@ var ellipse = draw.ellipse(80, 40).move(10, 10).fill({ color: gradient }) rect.maskWith(ellipse) ``` -For your convenience, the masking element is also referenced in the masked element. This can be useful in case you want to change the mask: +### Unmask +Unmasking the elements can be done with the `unmask()` method: ```javascript -rect.masker.fill('#fff') +rect.unmask() ``` -Unmasking the elements can be done with the `unmask()` method: +The `unmask()` method returns the masking element. + +### Remove +Removing the mask alltogether will also `unmask()` all masked elements as well: ```javascript -rect.unmask() +mask.remove() ``` -Removing the mask alltogether will also `unmask()` all masked elements: +Or: ```javascript rect.masker.remove() ``` -The `unmask()` method returns the masking element. So if you would like to remove the +### References +For your convenience, the masking element is also referenced in the masked element. This can be useful in case you want to change the mask: + +```javascript +rect.masker.fill('#fff') +``` _This functionality requires the mask.js module which is included in the default distribution._ @@ -1303,56 +1315,63 @@ _This functionality requires the clip.js module which is included in the default ## Arranging elements You can arrange elements within their parent SVG document using the following methods. +### Front Move element to the front: ```javascript rect.front() ``` +### Back Move element to the back: ```javascript rect.back() ``` -Note that `back()` will move the element to position 0. - +### Forward Move element one step forward: ```javascript rect.forward() ``` +### Backward Move element one step backward: ```javascript rect.backward() ``` +### Siblings The arrange.js module brings some additional methods. To get all siblings of rect, including rect itself: ```javascript rect.siblings() ``` +### Position Get the position (a number) of rect between its siblings: ```javascript rect.position() ``` +### Next Get the next sibling: ```javascript rect.next() ``` +### Previous Get the previous sibling: ```javascript rect.previous() ``` +### Before Insert an element before another: ```javascript @@ -1360,6 +1379,7 @@ Insert an element before another: rect.before(circle) ``` +### After Insert an element after another: ```javascript @@ -1386,20 +1406,22 @@ set.add(rect).add(circle) set.fill('#ff0') ``` -Quite a useful caracteristic of sets is the ability to accept multiple elements at once: +A single element can be a member of many sets. Sets also don't have a structural representation, in fact they are just fancy array's. + +### Add +Add an element to a set: ```javascript -set.add(rect, circle) +set.add(rect) ``` -Sets work with animations as well: +Quite a useful feature of sets is the ability to accept multiple elements at once: ```javascript -set.animate(3000).fill('#ff0') +set.add(rect, circle) ``` -A single element can be a member of many sets. Sets also don't have a structural representation, in fact they are just fancy array's. - +### Each Iterating over all members in a set is the same as with svg containers: ```javascript @@ -1408,18 +1430,40 @@ set.each(function(i) { }) ``` +### Has +Determine if an element is member of the set: + +```javascript +set.has(rect) //-> returns true of false +``` + +### Has +Get the element at a given index: + +```javascript +set.get(1) +``` + +### Remove To remove an element from a set: ```javascript set.remove(rect) ``` +### Clear Or to remove all elements from a set: ```javascript set.clear() ``` +Sets work with animations as well: + +```javascript +set.animate(3000).fill('#ff0') +``` + ## Gradients |