</div>
```
-### Manipulating elements
+## Elements
-#### Attributes
+### Rect
+Rects have two arguments, their width and height:
+```javascript
+var text = draw.rect(100, 100);
+```
+
+
+### Ellipse
+Ellipses, like rects, have two arguments, their width and height:
+```javascript
+var ellipse = draw.ellipse(100, 100);
+```
+
+
+### Circle
+The only argument necessary for a circle is the diameter:
+```javascript
+var circle = draw.circle(100);
+```
+
+
+### Text
+The first argument of a text element is the actual text content:
+```javascript
+var text = draw.text("svg\nto\nthe\npoint.").move(300, 0);
+```
+Changing text afterwards is also possible with the 'text()' method:
+```javascript
+text.text('Brilliant!');
+```
+To get the raw text content:
+```javascript
+text.content;
+```
+The sugar.js module provides some syntax sugar specifically for this element type:
+```javascript
+text.font({
+ family: 'Helvetica',
+ size: 144,
+ anchor: 'middle',
+ leading: 1.5
+});
+```
+
+
+### Image
+When creating images the width and height values should be defined:
+```javascript
+var image = draw.image('/path/to/image.jpg').move(100, 100).size(200, 200);
+```
+
+
+### Path
+```javascript
+var path = draw.path('M10,20L30,40').attr({ fill: '#9dffd3' });
+```
+
+For more details on path data strings, please read the SVG documentation:
+http://www.w3.org/TR/SVG/paths.html#PathData
+
+
+## Manipulating elements
+
+### Attributes
You can get and set an element's attributes directly using 'attr()':
```javascript
```
-#### Transform
+### Transform
With the transform attribute elements can be scaled, rotated, translated, skewed... :
```javascript
rect.transform('rotate(45, 100, 100)');
http://www.w3.org/TR/SVG/coords.html#TransformAttribute
-#### Move
+### Move
Move the element to a given x and y position by its upper left corner:
```javascript
rect.move(200, 350);
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 an y reference differ between element types. For example, rect uses the upper left corner and circle uses the centre.
-#### Size
+### 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.
-#### Removing elements
+### Removing elements
Pretty straightforward:
```javascript
rect.remove();
```
-### Text element
-Text elements can be created with an object as the first argument defining the 'text' content, 'x' and 'y':
-```javascript
-var text = draw.text("svg\nto\nthe\npoint.").move(300, 0);
-```
-Styling text can be done using the 'attr()':
-```javascript
-text.attr({
- 'font-family': 'Helvetica',
- 'font-size': 36,
- 'text-anchor': 'middle',
- 'leading': 1.5
-});
-```
-Changing text afterwards is also possible with the 'text()' method:
-```javascript
-text.text('Brilliant!');
-```
-To get the raw text content:
-```javascript
-text.attr('text');
-```
-The sugar.js module provides some syntax sugar specifically for this element type:
-```javascript
-text.font({
- family: 'Helvetica',
- size: 144,
- anchor: 'middle',
- leading: 1.5
-});
-```
-
-
-### Image element
-When creating images the width and height values should be defined:
-```javascript
-var image = draw.image('/path/to/image.jpg').move(100, 100).size(200, 200);
-```
-
-
-### Path element
-```javascript
-var path = draw.path('M10,20L30,40').attr({ fill: '#9dffd3' });
-```
-
-For more details on path data strings, please read the SVG documentation:
-http://www.w3.org/TR/SVG/paths.html#PathData
-
-
### Bounding box
```javascript
```
-### Syntax sugar
+## Syntax sugar
Fill and stroke are used quite often. Therefore two convenience methods are provided:
-#### Fill
+### Fill
The 'fill()' method is a pretty alternative to the 'attr()' method:
```javascript
rect.fill({ color: '#f06', opacity: 0.6 });
```
-#### Stroke
+### Stroke
The 'stroke()' method is similar to 'fill()':
```javascript
rect.stroke({ color: '#f06', opacity: 0.6, width: 5 });
```
-#### Rotate
+### Rotate
The 'rotate()' method will automatically rotate elements according to the centre of the element:
```javascript
rect.rotate({ deg: 45 });
_This functionality requires the sugar.js module which is included in the default distribution._
-### Clipping elements
+## Clipping elements
Clipping elements can be done with either 'clip()' or 'clipTo()'.
Using 'clip()' creates a clip path in the parents 'defs' node, and passes it to a block:
_This functionality requires the clip.js module which is included in the default distribution._
-### Arranging elements
+## Arranging elements
You can arrange elements within their parent SVG document using the following methods:
```javascript
_This functionality requires the arrange.js module which is included in the default distribution._
-### Grouping elements
+## Grouping elements
Grouping elements is useful if you want to transform a set of elements as if it were one. All element within a group maintain their position relative to the group they belong to. A group has all the same element methods as the root svg document:
```javascript
var group = draw.group();
_This functionality requires the group.js module which is included in the default distribution._
-### Gradients
+## Gradients
There are linear and radial gradients. The linear gradient can be created like this:
```javascript
var gradient = draw.gradient('linear', function(stop) {
projects / svg.js.git / commitdiff