Skip to content

Commit fcab9dc

Browse files
author
wout
committed
Slimmed down SVG.Shape
1 parent 8dfec33 commit fcab9dc

3 files changed

Lines changed: 33 additions & 36 deletions

File tree

‎.gitignore‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
11
.DS_Store
22
public/
3-
bleed/
3+
bleed/
4+
obsolete/

‎README.md‎

Lines changed: 30 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,41 @@
11
# svg.js
22

3-
svg.js is a JavaScript library for manipulating SVG.
3+
svg.js is a small JavaScript library for manipulating SVG.
44

55
Have a look at [svgjs.com](http://svgjs.com) for a examples.
66

77
svg.js is licensed under the terms of the MIT License.
88

99

10+
## Usage
11+
12+
### Create a SVG document
13+
14+
Use the svg() function to create a SVG document within a given html element:
15+
16+
```javascript
17+
var draw = svg('paper').size(300, 300);
18+
var rect = draw.rect({ width:100, height:100 }).attr({ fill: '#f06' });
19+
```
20+
The first argument can either be an id of the element or the selected element itself.
21+
This will generate the following output:
22+
23+
```html
24+
<div id="paper">
25+
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xlink="http://www.w3.org/1999/xlink" width="300" height="300">
26+
<rect width="100" height="100" fill-color="#f06"></rect>
27+
</svg>
28+
</div>
29+
```
30+
31+
### Path elements
32+
33+
```javascript
34+
var path = draw.path({ data: "M10,20L30,40" }).attr({ fill: '#9dffd3' });
35+
```
36+
37+
For more details on path data strings, check SVG documentation:
38+
http://www.w3.org/TR/SVG/paths.html#PathData
1039

1140

1241
## Compatibility

‎src/shape.js‎

Lines changed: 1 addition & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -4,37 +4,4 @@ SVG.Shape = function Shape(element) {
44
};
55

66
// inherit from SVG.Element
7-
SVG.Shape.prototype = new SVG.Element();
8-
9-
// Add shape-specific functions
10-
SVG.Utils.merge(SVG.Shape, {
11-
12-
// set fill color and opacity
13-
fill: function(f) {
14-
if (f.color != null)
15-
this.attr('fill', f.color);
16-
17-
if (f.opacity != null)
18-
this.attr('fill-opacity', f.opacity);
19-
20-
return this;
21-
},
22-
23-
// set stroke color and opacity
24-
stroke: function(s) {
25-
if (s.color)
26-
this.attr('stroke', s.color);
27-
28-
if (s.width != null)
29-
this.attr('stroke-width', s.width);
30-
31-
if (s.opacity != null)
32-
this.attr('stroke-opacity', s.opacity);
33-
34-
if (this.attrs['fill-opacity'] == null)
35-
this.fill({ opacity: 0 });
36-
37-
return this;
38-
}
39-
40-
});
7+
SVG.Shape.prototype = new SVG.Element();

0 commit comments

Comments
 (0)