aboutsummaryrefslogtreecommitdiffstats
path: root/README.md
diff options
context:
space:
mode:
authorwout <wout@impinc.co.uk>2014-01-31 18:18:21 +0100
committerwout <wout@impinc.co.uk>2014-01-31 18:18:21 +0100
commit2eff62f9839fc0fd91234a130762f1936ffc85ff (patch)
tree62c660103540963c00437efd25cc17dc670dd329 /README.md
parentda1816dcdb7082981d47517e909807ed075697d2 (diff)
downloadsvg.js-2eff62f9839fc0fd91234a130762f1936ffc85ff.tar.gz
svg.js-2eff62f9839fc0fd91234a130762f1936ffc85ff.zip
Updated README
Diffstat (limited to 'README.md')
-rw-r--r--README.md63
1 files changed, 47 insertions, 16 deletions
diff --git a/README.md b/README.md
index b5e280f..6fa3e2b 100644
--- a/README.md
+++ b/README.md
@@ -698,13 +698,16 @@ Move the element to a given `x` and `y` position by its upper left corner:
rect.move(200, 350)
```
-This will have the same effect as:
+The `text` element has one optional argument:
```javascript
-rect.x(200).y(350)
+// move(x, y, anchor)
+rect.move(200, 350, true)
```
-Note that you can also use the following code to move elements around:
+The third argument can be used to move the text element by its anchor point rather than the calculated left top position.
+
+Note that you can also use the following code to move some elements (like images and rects) around:
```javascript
rect.attr({ x: 20, y: 60 })
@@ -712,17 +715,30 @@ rect.attr({ x: 20, y: 60 })
Although `move()` is much more convenient because it will always use the upper left corner as the position reference, whereas with using `attr()` the `x` and `y` reference differ between element types. For example, rect uses the upper left corner with the `x` and `y` attributes, circle and ellipse use their center with the `cx` and `cy` attributes and thereby simply ignoring the `x` and `y` values you might assign.
-The `text` element has one optional argument:
+### x()
+Move element only along x-axis by its upper left corner:
```javascript
-// move(x, y, anchor)
-rect.move(200, 350, true)
+rect.x(200)
+```
+
+Without an argument the `x()` method serves as a getter as well:
+
+```javascript
+rect.x() //-> returns 200
+```
+
+### y()
+Move element only along y-axis by its upper left corner:
+
+```javascript
+rect.y(350)
```
-The third argument can be used to move the text element by its anchor point rather than the calculated left top position. This can also be used on the individual axes:
+Without an argument the `y()` method serves as a getter as well:
```javascript
-rect.x(200, true).y(350, true)
+rect.y() //-> returns 350
```
### relative()
@@ -737,32 +753,47 @@ This will set the `x` position of the element to `120` and the `y` position to `
It works the same way for `relative().x()` and `relative().y()`.
-### center(), cx() and cy()
+### center()
This is an extra method to move an element by its center:
```javascript
rect.center(150, 150)
```
-This will have the same effect as:
+The `text` element has one optional argument:
```javascript
-rect.cx(150).cy(150)
+// center(x, y, anchor)
+rect.center(150, 150, true)
```
-The `text` element has one optional argument:
+The third argument can be used to center the text element by its anchor point rather than the calculated center position.
+
+### cx()
+Move element only along x-axis by its center:
```javascript
-// center(x, y, anchor)
-rect.center(150, 150, true)
+rect.cx(200)
```
-The third argument can be used to center the text element by its anchor point rather than the calculated center position. This can also be used on the individual axes:
+Without an argument the `cx()` method serves as a getter as well:
```javascript
-rect.cx(150, true).cy(150, true)
+rect.cx() //-> returns 200
```
+### cy()
+Move element only along y-axis by its center:
+
+```javascript
+rect.cy(350)
+```
+
+Without an argument the `cy()` method serves as a getter as well:
+
+```javascript
+rect.cy() //-> returns 350
+```
### size()
Set the size of an element by a given `width` and `height`: