summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorwout <wout@impinc.co.uk>2013-08-12 10:20:27 +0100
committerwout <wout@impinc.co.uk>2013-08-12 10:20:27 +0100
commit3029967a94ec0ae777ff9be6548aecd3b88ea8c3 (patch)
treed2083775b5dfbfa69bcfb4514a97f65bc4c5406f
parent945c1a0a423cf8a0b80fc8288651e04dec8b6610 (diff)
downloadsvg.js-3029967a94ec0ae777ff9be6548aecd3b88ea8c3.tar.gz
svg.js-3029967a94ec0ae777ff9be6548aecd3b88ea8c3.zip
Updated README
-rw-r--r--README.md41
1 files changed, 39 insertions, 2 deletions
diff --git a/README.md b/README.md
index db009d8..92a6cd2 100644
--- a/README.md
+++ b/README.md
@@ -294,6 +294,12 @@ And they can be animated as well of course:
text.textPath.animate(3000).attr('startOffset', 0.8)
```
+Referencing the linked path element directly:
+
+```javascript
+var path = text.track
+```
+
### Use
The use element simply emulates another existing element. Any changes on the master element will be reflected on all the `use` instances. The usage of `use()` is very straightforward:
@@ -314,6 +320,8 @@ In this way the rect element acts as a library element. You can edit it but it w
## Referencing elements
+
+### By id
If you want to get an element created by svg.js by its id, you can use the `SVG.get()` method:
```javascript
@@ -322,6 +330,35 @@ var element = SVG.get('my_element')
element.fill('#f06')
```
+### By class name
+There is no DOM querying system built into svg.js but [jQuery](http://jquery.com/) or [Zepto](http://zeptojs.com/) will hep you achieve this. Here is an example:
+
+```javascript
+/* add elements */
+var draw = SVG('canvas')
+var group = draw.group().attr('class', 'my-group')
+var rect = group.rect(100,100).attr('class', 'my-element')
+var circle = group.circle(100).attr('class', 'my-element').move(100, 100)
+
+/* get elements in group */
+var elements = $('#canvas g.my-group .my-element').each(function() {
+ this.instance.animate().fill('#f09')
+})
+```
+
+### Circluar reference
+Every element instance within svg.js has a reference to the actual `node`:
+
+```javascript
+element.node
+```
+
+Similarly, the node carries a reference to the svg.js `instance`:
+
+```javascript
+node.instance
+```
+
## Manipulating elements
@@ -626,7 +663,7 @@ Animating elements is very much the same as manipulating elements, the only diff
rect.animate().move(150, 150)
```
-The `animate()` method will take three arguments. The first is `milliseconds`, the second `ease` and the third `delay`:
+The `animate()` method will take three arguments. The first is `duration`, the second `ease` and the third `delay`:
```javascript
rect.animate(2000, '>', 1000).attr({ fill: '#f03' })
@@ -638,7 +675,7 @@ Alternatively you can pass an object as the first argument:
rect.animate({ ease: '<', delay: 1500 }).attr({ fill: '#f03' })
```
-By default `milliseconds` will be set to `1000`, `ease` will be set to `<>`.
+By default `duration` will be set to `1000`, `ease` will be set to `<>`.
### Easing
All available ease types are: