1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
|
# svg.js
svg.js is a small JavaScript library for manipulating SVG.
Have a look at [svgjs.com](http://svgjs.com) for a examples.
svg.js is licensed under the terms of the MIT License.
## Usage
### Create a SVG document
Use the svg() function to create a SVG document within a given html element:
```javascript
var draw = svg('paper').size(300, 300);
var rect = draw.rect({ width:100, height:100 }).attr({ fill: '#f06' });
```
The first argument can either be an id of the element or the selected element itself.
This will generate the following output:
```html
<div id="paper">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xlink="http://www.w3.org/1999/xlink" width="300" height="300">
<rect width="100" height="100" fill-color="#f06"></rect>
</svg>
</div>
```
### Path elements
```javascript
var path = draw.path({ data: "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
path.bbox();
```
This will return a SVGRect element as a js object:
```javascript
{ height: 20, width: 20, y: 20, x: 10 }
```
### 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:
```javascript
rect.clip(function(clipPath) {
clipPath.rect({ x:10, y:10, width:80, height:80 });
});
```
You can also reuse clip paths for multiple elements using 'clipTo()'.
```javascript
var clipPath = doc.defs().clipPath();
clipRect = clipPath.rect({ x:10, y:10, width:80, height:80 });
rect.clipTo(clipPath);
```
### Setting attributes
You can set an element's attributes directly with 'attr()':
```javascript
// set a single attribute
rect.attr('x', 50);
// set multiple attributes at once
rect.attr({
fill: '#f06',
'fill-opacity': 0.5,
stroke: '#000',
'stroke-width': 10
});
// set an attribute with a namespace
rect.setAttribute('x', 50, 'http://www.w3.org/2000/svg');
```
## Compatibility
### Desktop
- Firefox 3+
- Chrome 4+
- Safari 3.2+
- Opera 9+
- IE 9+
### Mobile
- iOS Safari 3.2+
- Android Browser 3+
- Blackberry 7+
- Opera Mini 5+
- Opera Mobile 10+
- Chrome for Android 18+
- Firefox for Android 15+
|
