diff options
author | wout <wout@impinc.co.uk> | 2012-12-31 16:16:05 +0100 |
---|---|---|
committer | wout <wout@impinc.co.uk> | 2012-12-31 16:16:05 +0100 |
commit | 5e7c26e9423f3c543e04bc9a11656125ec7bf8ca (patch) | |
tree | 5e568b9a8083aa23b1bf830b7f4a42a3c8c1a1c0 /README.md | |
parent | 8dbe3599dd9b80738c4124f7e71bc12e763c50dc (diff) | |
download | svg.js-5e7c26e9423f3c543e04bc9a11656125ec7bf8ca.tar.gz svg.js-5e7c26e9423f3c543e04bc9a11656125ec7bf8ca.zip |
Added each(), next(), previous() and more
Diffstat (limited to 'README.md')
-rw-r--r-- | README.md | 63 |
1 files changed, 55 insertions, 8 deletions
@@ -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._ |