From fcab9dc4d28abb27b166b7974bf07de0f9fa9fc2 Mon Sep 17 00:00:00 2001 From: wout Date: Mon, 17 Dec 2012 19:51:47 +0100 Subject: [PATCH] Slimmed down SVG.Shape --- .gitignore | 3 ++- README.md | 31 ++++++++++++++++++++++++++++++- src/shape.js | 35 +---------------------------------- 3 files changed, 33 insertions(+), 36 deletions(-) diff --git a/.gitignore b/.gitignore index 7140596..77fa516 100644 --- a/.gitignore +++ b/.gitignore @@ -1,3 +1,4 @@ .DS_Store public/ -bleed/ \ No newline at end of file +bleed/ +obsolete/ \ No newline at end of file diff --git a/README.md b/README.md index 23f9d79..30b8289 100644 --- 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 +
+ + + +
+``` + +### 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 diff --git a/src/shape.js b/src/shape.js index 1a32a00..236a066 100644 --- a/src/shape.js +++ b/src/shape.js @@ -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 -- 2.39.5