summaryrefslogtreecommitdiffstats
path: root/README.md
diff options
context:
space:
mode:
authorwout <wout@impinc.co.uk>2012-12-31 16:16:05 +0100
committerwout <wout@impinc.co.uk>2012-12-31 16:16:05 +0100
commit5e7c26e9423f3c543e04bc9a11656125ec7bf8ca (patch)
tree5e568b9a8083aa23b1bf830b7f4a42a3c8c1a1c0 /README.md
parent8dbe3599dd9b80738c4124f7e71bc12e763c50dc (diff)
downloadsvg.js-5e7c26e9423f3c543e04bc9a11656125ec7bf8ca.tar.gz
svg.js-5e7c26e9423f3c543e04bc9a11656125ec7bf8ca.zip
Added each(), next(), previous() and more
Diffstat (limited to 'README.md')
-rw-r--r--README.md63
1 files changed, 55 insertions, 8 deletions
diff --git a/README.md b/README.md
index 554303e..fc9a54d 100644
--- a/README.md
+++ b/README.md
@@ -230,12 +230,19 @@ rect.show();
### Removing elements
Pretty straightforward:
+
```javascript
rect.remove();
```
+To remove all elements in the svg document:
+
+```javascript
+draw.clear();
+```
+
-## Bounding box
+### Bounding box
```javascript
path.bbox();
@@ -249,6 +256,17 @@ This will return an object with the following values:
As opposed to the native `getBBox()` method any translations used with the `transform()` method will be taken into account.
+### Iterating over all children
+
+If you would iterate over all the `children()` of the svg document, you might notice also the `<defs>` and `<g>` elements will be included. To iterate the shapes only, you can use the `each()` method:
+
+```javascript
+draw.each(function(i, children) {
+ this.fill({ color: '#f06' });
+});
+```
+
+
## Syntax sugar
Fill and stroke are used quite often. Therefore two convenience methods are provided:
@@ -340,29 +358,58 @@ _This functionality requires the mask.js module which is included in the default
## Arranging elements
-You can arrange elements within their parent SVG document using the following methods:
+You can arrange elements within their parent SVG document using the following methods.
+
+Move element to the front:
```javascript
-// move element to the front
rect.front();
+```
+
+Move element to the back:
-// move element to the back
+```javascript
rect.back();
+```
-// move element one step forward
+Note that `back()` will move the element to position 1, not 0, because the `<defs>` node is already located at position 0.
+
+Move element one step forward:
+
+```javascript
rect.forward();
+```
+
+Move element one step backward:
-// move element one step backward
+```javascript
rect.backward();
```
-The arrange.js module brings some additional methods:
+The arrange.js module brings some additional methods. To get all siblings of rect, including rect itself:
+
+```javascript
+rect.siblings();
+```
+
+Get the position (a number) of rect between its siblings:
```javascript
-// returns the position (a number) of the element between its siblings
rect.position();
```
+Get the next sibling:
+
+```javascript
+rect.next();
+```
+
+Get the previous sibling:
+
+```javascript
+rect.previous();
+```
+
_This functionality requires the arrange.js module which is included in the default distribution._