]> source.dussan.org Git - svg.js.git/commitdiff
Slimmed down SVG.Shape
authorwout <wout@impinc.co.uk>
Mon, 17 Dec 2012 18:51:47 +0000 (19:51 +0100)
committerwout <wout@impinc.co.uk>
Mon, 17 Dec 2012 18:51:47 +0000 (19:51 +0100)
.gitignore
README.md
src/shape.js

index 7140596ffbbcd6a5f4f63c7c95c3e984b0eaec87..77fa516260de4d1ddb169a3e0d263a77f481d380 100644 (file)
@@ -1,3 +1,4 @@
 .DS_Store
 public/
-bleed/
\ No newline at end of file
+bleed/
+obsolete/
\ No newline at end of file
index 23f9d793829257114d9d320ece97f9060be5d7f1..30b8289844603724bc951f4d69507741fde87c3a 100644 (file)
--- a/README.md
+++ b/README.md
@@ -1,12 +1,41 @@
 # svg.js
 
-svg.js is a JavaScript library for manipulating SVG.
+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, check SVG documentation:
+http://www.w3.org/TR/SVG/paths.html#PathData
 
 
 ## Compatibility
index 1a32a00f83d7bef90f2c3c60f4579879a89ed279..236a066f5a59b4f18decd8310713f6e481e9e8f6 100644 (file)
@@ -4,37 +4,4 @@ SVG.Shape = function Shape(element) {
 };
 
 // inherit from SVG.Element
-SVG.Shape.prototype = new SVG.Element();
-
-// Add shape-specific functions
-SVG.Utils.merge(SVG.Shape, {
-  
-  // set fill color and opacity
-  fill: function(f) {
-    if (f.color != null)
-      this.attr('fill', f.color);
-
-    if (f.opacity != null)
-      this.attr('fill-opacity', f.opacity);
-
-    return this;
-  },
-
-  // set stroke color and opacity
-  stroke: function(s) {
-    if (s.color)
-      this.attr('stroke', s.color);
-
-    if (s.width != null)
-      this.attr('stroke-width', s.width);
-
-    if (s.opacity != null)
-      this.attr('stroke-opacity', s.opacity);
-
-    if (this.attrs['fill-opacity'] == null)
-      this.fill({ opacity: 0 });
-
-    return this;
-  }
-  
-});
\ No newline at end of file
+SVG.Shape.prototype = new SVG.Element();
\ No newline at end of file