aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorwout <wout@impinc.co.uk>2012-12-28 00:07:18 +0100
committerwout <wout@impinc.co.uk>2012-12-28 00:07:18 +0100
commitd97618864b73d4347d231369403ebfb16cdf9d62 (patch)
tree1376e0c9ab209b486e535d39bf87c77c9d425b59
parent92628abe74749f8106ec271368c87df6b6f3c134 (diff)
downloadsvg.js-d97618864b73d4347d231369403ebfb16cdf9d62.tar.gz
svg.js-d97618864b73d4347d231369403ebfb16cdf9d62.zip
Added center to all elements
-rw-r--r--README.md29
1 files changed, 17 insertions, 12 deletions
diff --git a/README.md b/README.md
index 9d160ec..c8d727c 100644
--- a/README.md
+++ b/README.md
@@ -34,7 +34,7 @@ var draw = svg('paper').size('100%', '100%');
## Elements
### Rect
-Rects have two arguments, their width and height:
+Rects have two arguments, their `width` and `height`:
```javascript
var text = draw.rect(100, 100);
```
@@ -45,21 +45,12 @@ Ellipses, like rects, have two arguments, their `width` and `height`:
```javascript
var ellipse = draw.ellipse(100, 100);
```
-This element type has an extra method to move it by its `cx` and `cy` values:
-```javascript
-ellipse.center(150, 150);
-```
### Circle
The only argument necessary for a circle is the diameter:
```javascript
var circle = draw.circle(100);
```
-Like ellipse this element type has an extra method to move it by its `cx` and `cy` values:
-```javascript
-circle.center(150, 150);
-```
-
### Text
The first argument of a text element is the actual text content:
@@ -159,24 +150,38 @@ Important: matrix transformations are not yet supported.
### Move
Move the element to a given `x` and `y` position by its upper left corner:
+
```javascript
rect.move(200, 350);
```
+
Note that you can also use the following code to move elements around:
+
```javascript
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 centre with the `cx` and `cy` attributes and thereby simply ignoring the `x` and `y` values you might assign.
+
+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.
### Size
Set the size of an element by a given `width` and `height`:
+
```javascript
rect.size(200, 300);
```
+
Same as with `move()` the size of an element could be set by using `attr()`. But because every type of element is handles its size differently the `size()` method is much more convenient.
+### Centre
+This is an extra method to move an element by its center:
+
+```javascript
+rect.center(150, 150);
+```
+
+
### Removing elements
Pretty straightforward:
```javascript
@@ -215,7 +220,7 @@ rect.stroke({ color: '#f06', opacity: 0.6, width: 5 });
```
### Rotate
-The `rotate()` method will automatically rotate elements according to the centre of the element:
+The `rotate()` method will automatically rotate elements according to the center of the element:
```javascript
// rotate(degrees)