summaryrefslogtreecommitdiffstats
path: root/README.md
diff options
context:
space:
mode:
authorwout <wout@impinc.co.uk>2014-01-25 16:28:05 +0100
committerwout <wout@impinc.co.uk>2014-01-25 16:28:05 +0100
commita6aacddee1b7e62101aa2d7e6ed9bc41b61f99a6 (patch)
treeb81f2cf1d71ddc40f562cbf66b32e9fcd76f2c3b /README.md
parent02181d1c9c7cbc0a3073a6e1ba769d0b0601a6b4 (diff)
downloadsvg.js-a6aacddee1b7e62101aa2d7e6ed9bc41b61f99a6.tar.gz
svg.js-a6aacddee1b7e62101aa2d7e6ed9bc41b61f99a6.zip
Updated README0.37
Diffstat (limited to 'README.md')
-rw-r--r--README.md102
1 files changed, 80 insertions, 22 deletions
diff --git a/README.md b/README.md
index 7be0a52..24ec535 100644
--- a/README.md
+++ b/README.md
@@ -224,6 +224,12 @@ The line element always takes four arguments, `x1`, `y1`, `x2` and `y2`:
var line = draw.line(0, 0, 100, 150).stroke({ width: 1 })
```
+Updating a line is done with the `plot()` method:
+
+```javascript
+line.plot(50, 30, 100, 150)
+```
+
_Javascript inheritance stack: `SVG.Line` < `SVG.Shape` < `SVG.Element`_
### Polyline
@@ -443,7 +449,7 @@ var elements = $('#drawing g.my-group .my-element').each(function() {
})
```
-### Circluar reference
+## Circluar reference
Every element instance within svg.js has a reference to the actual `node`:
```javascript
@@ -456,9 +462,11 @@ Similarly, the node carries a reference to the svg.js `instance`:
node.instance
```
-### Parent reference
+## Parent reference
Every element has a reference to its parent:
+### Parent
+
```javascript
element.parent
```
@@ -471,6 +479,7 @@ var draw = SVG('drawing')
draw.parent //-> returns the wrappig html element with id 'drawing'
```
+### Doc
For more specific parent filtering the `doc()` method can be used:
```javascript
@@ -494,6 +503,69 @@ rect.doc(SVG.Nested) //-> returns nested
rect.doc(SVG.G) //-> returns group
```
+## Child references
+
+### First
+To get the first child of a parent element:
+
+```javascript
+draw.first()
+```
+
+### Last
+To get the last child of a parent element:
+
+```javascript
+draw.last()
+```
+
+### Children
+An array of all children will can be retreives with the `children` method:
+
+```javascript
+draw.children()
+```
+
+### Each
+The `each()` allows you to iterate over the all children of a parent element:
+
+```javascript
+draw.each(function(i, children) {
+ this.fill({ color: '#f06' })
+})
+```
+
+Deep traversing is also possible by passing true as the second argument:
+
+```javascript
+// draw.each(block, deep)
+draw.each(function(i, children) {
+ this.fill({ color: '#f06' })
+}, true)
+```
+
+### Has
+Checking the existence of an element within a parent:
+
+```javascript
+var rect = draw.rect(100, 50)
+var group = draw.group()
+
+draw.has(rect) //-> returns true
+group.has(rect) //-> returns false
+```
+
+### Get
+Get an element on a given position in the children array:
+
+```javascript
+var rect = draw.rect(20, 30)
+var circle = draw.circle(50)
+
+draw.get(0) //-> returns rect
+draw.get(1) //-> returns circle
+```
+
## Manipulating elements
@@ -774,25 +846,6 @@ rect.replace(draw.circle(100))
```
-### 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' })
-})
-```
-
-Deep traversing is also possible by passing true as the second argument:
-
-```javascript
-// draw.each(block, deep)
-draw.each(function(i, children) {
- this.fill({ color: '#f06' })
-}, true)
-```
-
## Inserting elements
### Add
@@ -1446,6 +1499,8 @@ _This functionality requires the gradient.js module which is included in the def
## Events
+
+### Basic events
Events can be bound to elements as follows:
```javascript
@@ -1460,12 +1515,15 @@ Removing it is quite as easy:
rect.click(null)
```
+All available evenets are: `click`, `dblclick`, `mousedown`, `mouseup`, `mouseover`, `mouseout`, `mousemove`, `mouseenter` and `mouseleave`.
+
+### Event listeners
You can also bind event listeners to elements:
```javascript
var click = function() {
rect.fill({ color: '#f06' })
-};
+}
rect.on('click', click)
```