Updated docs

diff --git a/README.md b/README.md
index d06097f825b1b5f78b1b945f77f51b8c9bf9e687..2a6d2049535496aac689430d043e548e4bebf80f 100644 (file)
--- a/README.md
+++ b/README.md
@@ -11,7 +11,7 @@ svg.js is licensed under the terms of the MIT License.
 
 ### Create a SVG document
 
-Use the svg() function to create a SVG document within a given html element:
+Use the 'svg()' function to create a SVG document within a given html element:
 
 ```javascript
 var draw = svg('paper').size(300, 300);
@@ -28,7 +28,48 @@ This will generate the following output:
 </div>
 ```
 
-### Path elements
+### Manipulating elements
+
+#### 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');
+```
+
+#### Move 
+Move the element to a given x and y position by its upper left corner:
+```javascript
+rect.move(200, 350);
+```
+Note that you can also use the following code to move elements around:
+```javascript
+rect.attr({ x: 20, y: 60 })
+``` 
+Although 'move()' is much more convenient because it will also 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 center.
+
+
+#### 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()' function is much more convenient.
+
+
+### Path element
 
 ```javascript
 var path = draw.path({ data: "M10,20L30,40" }).attr({ fill: '#9dffd3' });
@@ -67,25 +108,6 @@ 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

diff --git a/dist/svg.js b/dist/svg.js
index 62d32af6959c0fcfc15f2bf3bbc88cc967621ca8..f0b8cc8e4bc1b55bdc316946c308b2ee02d0e9e4 100644 (file)
--- a/dist/svg.js
+++ b/dist/svg.js
@@ -311,6 +311,39 @@
   
   // 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;
+    }
+    
+  });
 
   SVG.Rect = function Rect() {
     this.constructor.call(this, SVG.create('rect'));

diff --git a/dist/svg.min.js b/dist/svg.min.js
index e5c2696ded408061cdd7d94041379e250ddb1bed..c8f59e5b43fd89be0f5aff9c4e36c284c88dc0bb 100644 (file)
--- a/dist/svg.min.js
+++ b/dist/svg.min.js
@@ -1,2 +1,2 @@
 /* svg.js 0.1 - svg utils container element doc defs shape rect circle ellipse path image g clip - svgjs.com/license */
-(function(){this.SVG={ns:"http://www.w3.org/2000/svg",xlink:"http://www.w3.org/1999/xlink",create:function(e){return document.createElementNS(this.ns,e)}},this.svg=function(e){return new SVG.Doc(e)},SVG.Utils={merge:function(e,t){for(var n in t)e.prototype[n]=t[n]}},SVG.Container={add:function(e){return this.addAt(e)},addAt:function(e,t){return this.contains(e)||(t=t==null?this.children().length:t,this.children().splice(t,0,e),this.node.insertBefore(e.node,this.node.childNodes[t+1]),e.parent=this),this},contains:function(e){return Array.prototype.indexOf.call(this.children(),e)>=0},children:function(){return this._children||[]},sendBack:function(e){var t=this.children().indexOf(e);if(t!==-1)return this.remove(e).addAt(e,t-1)},bringForward:function(e){var t=this.children().indexOf(e);if(t!==-1)return this.remove(e).addAt(e,t+1)},bringToFront:function(e){return this.contains(e)&&this.remove(e).add(e),this},sendToBottom:function(e){return this.contains(e)&&this.remove(e).addAt(e,0),this},remove:function(e){return this.removeAt(this.children().indexOf(e))},removeAt:function(e){if(0<=e&&e<this.children().length){var t=this.children()[e];this.children().splice(e,1),this.node.removeChild(t.node),t.parent=null}return this},defs:function(){return this._defs==null&&(this._defs=new SVG.Defs,this.add(this._defs)),this._defs},group:function(){var e=new SVG.G;return this.add(e),e},rect:function(e){return this.place(new SVG.Rect,e)},circle:function(e){var t;return e!=null&&(t={x:e.x,y:e.y},e.r||e.radius?t.width=t.height=(e.r||e.radius)*2:t.width=t.height=e.width||e.height),this.place(new SVG.Circle,t)},ellipse:function(e){var t;return e!=null&&(t={x:e.x,y:e.y},e.width&&(t.width=e.width),e.height&&(t.height=e.height),e.rx&&(t.width=e.rx*2),e.ry&&(t.height=e.ry*2)),this.place(new SVG.Ellipse,t)},path:function(e){return this.place(new SVG.Path,e)},image:function(e){return this.place(new SVG.Image,e)},place:function(e,t){return t!=null&&(t.x!=null&&t.y!=null&&e.move(t.x,t.y),t.width!=null&&t.height!=null&&e.size(t.width,t.height),t.data!=null&&e.data(t.data),t.src!=null&&e.load(t.src)),this.add(e),e}},SVG.Element=function(t){this.node=t,this.attrs={}},SVG.Utils.merge(SVG.Element,{move:function(e,t){return this.attr("x",e),this.attr("y",t),this},opacity:function(e){return this.attr("opacity",Math.max(0,Math.min(1,e)))},size:function(e,t){return this.attr("width",e),this.attr("height",t),this},clip:function(e){var t=this.parentSVG().defs().clipPath();return e(t),this.clipTo(t)},clipTo:function(e){return this.attr("clip-path","url(#"+e.id+")")},remove:function(){return this.parent!=null?this.parent.remove(this):void 0},parentDoc:function(){return this._parent(SVG.Doc)},parentSVG:function(){return this.parentDoc()},attr:function(e){var t=arguments;this.attrs[t[0]]=t[1];if(typeof e=="object")for(var n in e)this.attr(n,e[n]);else t.length==2?this.node.setAttribute(t[0],t[1]):t.length==3&&this.node.setAttributeNS(t[2],t[0],t[1]);return this},bbox:function(){return this.node.getBBox()},_parent:function(e){var t=this;while(t!=null&&!(t instanceof e))t=t.parent;return t}}),SVG.Doc=function(t){this.constructor.call(this,SVG.create("svg")),this.attr("xmlns",SVG.ns),this.attr("version","1.1"),this.attr("xlink",SVG.xlink,SVG.ns),typeof t=="string"&&(t=document.getElementById(t)),t.appendChild(this.node)},SVG.Doc.prototype=new SVG.Element,SVG.Utils.merge(SVG.Doc,SVG.Container),SVG.Defs=function(){this.constructor.call(this,SVG.create("defs"))},SVG.Defs.prototype=new SVG.Element,SVG.Utils.merge(SVG.Defs,SVG.Container),SVG.Utils.merge(SVG.Defs,{clipPath:function(){var e=new SVG.Clip;return this.add(e),e}}),SVG.Shape=function(t){this.constructor.call(this,t)},SVG.Shape.prototype=new SVG.Element,SVG.Rect=function(){this.constructor.call(this,SVG.create("rect"))},SVG.Rect.prototype=new SVG.Shape,SVG.Circle=function(){this.constructor.call(this,SVG.create("circle"))},SVG.Circle.prototype=new SVG.Shape,SVG.Utils.merge(SVG.Circle,{move:function(e,t){return this.attrs.x=e,this.attrs.y=t,this.center(),this},size:function(e,t){return this.attr("r",e/2),this.center(),this},center:function(e,t){var n=this.attrs.r||0;this.attr("cx",e||(this.attrs.x||0)+n),this.attr("cy",t||(this.attrs.y||0)+n)}}),SVG.Ellipse=function(){this.constructor.call(this,SVG.create("ellipse"))},SVG.Ellipse.prototype=new SVG.Shape,SVG.Utils.merge(SVG.Ellipse,{move:function(e,t){return this.attrs.x=e,this.attrs.y=t,this.center(),this},size:function(e,t){return this.attr("rx",e/2),this.attr("ry",t/2),this.center(),this},center:function(e,t){this.attr("cx",e||(this.attrs.x||0)+(this.attrs.rx||0)),this.attr("cy",t||(this.attrs.y||0)+(this.attrs.ry||0))}}),SVG.Path=function(){this.constructor.call(this,SVG.create("path"))},SVG.Path.prototype=new SVG.Shape,SVG.Utils.merge(SVG.Path,{data:function(e){return this.attr("d",e),this}}),SVG.Image=function(){this.constructor.call(this,SVG.create("image"))},SVG.Image.prototype=new SVG.Element,SVG.Utils.merge(SVG.Image,SVG.Container),SVG.Utils.merge(SVG.Image,{load:function(e){return this.attr("href",e,SVG.xlink),this}}),SVG.G=function(){this.constructor.call(this,SVG.create("g"))},SVG.G.prototype=new SVG.Element,SVG.Utils.merge(SVG.G,SVG.Container),SVG.Utils.merge(SVG.G,{rotate:function(e){return this.attr("transform","rotate("+e+")"),this}});var e=0;SVG.Clip=function(){this.constructor.call(this,SVG.create("clipPath")),this.id="_"+e++,this.attr("id",this.id)},SVG.Clip.prototype=new SVG.Element,SVG.Utils.merge(SVG.Clip,SVG.Container)}).call(this);
\ No newline at end of file
+(function(){this.SVG={ns:"http://www.w3.org/2000/svg",xlink:"http://www.w3.org/1999/xlink",create:function(e){return document.createElementNS(this.ns,e)}},this.svg=function(e){return new SVG.Doc(e)},SVG.Utils={merge:function(e,t){for(var n in t)e.prototype[n]=t[n]}},SVG.Container={add:function(e){return this.addAt(e)},addAt:function(e,t){return this.contains(e)||(t=t==null?this.children().length:t,this.children().splice(t,0,e),this.node.insertBefore(e.node,this.node.childNodes[t+1]),e.parent=this),this},contains:function(e){return Array.prototype.indexOf.call(this.children(),e)>=0},children:function(){return this._children||[]},sendBack:function(e){var t=this.children().indexOf(e);if(t!==-1)return this.remove(e).addAt(e,t-1)},bringForward:function(e){var t=this.children().indexOf(e);if(t!==-1)return this.remove(e).addAt(e,t+1)},bringToFront:function(e){return this.contains(e)&&this.remove(e).add(e),this},sendToBottom:function(e){return this.contains(e)&&this.remove(e).addAt(e,0),this},remove:function(e){return this.removeAt(this.children().indexOf(e))},removeAt:function(e){if(0<=e&&e<this.children().length){var t=this.children()[e];this.children().splice(e,1),this.node.removeChild(t.node),t.parent=null}return this},defs:function(){return this._defs==null&&(this._defs=new SVG.Defs,this.add(this._defs)),this._defs},group:function(){var e=new SVG.G;return this.add(e),e},rect:function(e){return this.place(new SVG.Rect,e)},circle:function(e){var t;return e!=null&&(t={x:e.x,y:e.y},e.r||e.radius?t.width=t.height=(e.r||e.radius)*2:t.width=t.height=e.width||e.height),this.place(new SVG.Circle,t)},ellipse:function(e){var t;return e!=null&&(t={x:e.x,y:e.y},e.width&&(t.width=e.width),e.height&&(t.height=e.height),e.rx&&(t.width=e.rx*2),e.ry&&(t.height=e.ry*2)),this.place(new SVG.Ellipse,t)},path:function(e){return this.place(new SVG.Path,e)},image:function(e){return this.place(new SVG.Image,e)},place:function(e,t){return t!=null&&(t.x!=null&&t.y!=null&&e.move(t.x,t.y),t.width!=null&&t.height!=null&&e.size(t.width,t.height),t.data!=null&&e.data(t.data),t.src!=null&&e.load(t.src)),this.add(e),e}},SVG.Element=function(t){this.node=t,this.attrs={}},SVG.Utils.merge(SVG.Element,{move:function(e,t){return this.attr("x",e),this.attr("y",t),this},opacity:function(e){return this.attr("opacity",Math.max(0,Math.min(1,e)))},size:function(e,t){return this.attr("width",e),this.attr("height",t),this},clip:function(e){var t=this.parentSVG().defs().clipPath();return e(t),this.clipTo(t)},clipTo:function(e){return this.attr("clip-path","url(#"+e.id+")")},remove:function(){return this.parent!=null?this.parent.remove(this):void 0},parentDoc:function(){return this._parent(SVG.Doc)},parentSVG:function(){return this.parentDoc()},attr:function(e){var t=arguments;this.attrs[t[0]]=t[1];if(typeof e=="object")for(var n in e)this.attr(n,e[n]);else t.length==2?this.node.setAttribute(t[0],t[1]):t.length==3&&this.node.setAttributeNS(t[2],t[0],t[1]);return this},bbox:function(){return this.node.getBBox()},_parent:function(e){var t=this;while(t!=null&&!(t instanceof e))t=t.parent;return t}}),SVG.Doc=function(t){this.constructor.call(this,SVG.create("svg")),this.attr("xmlns",SVG.ns),this.attr("version","1.1"),this.attr("xlink",SVG.xlink,SVG.ns),typeof t=="string"&&(t=document.getElementById(t)),t.appendChild(this.node)},SVG.Doc.prototype=new SVG.Element,SVG.Utils.merge(SVG.Doc,SVG.Container),SVG.Defs=function(){this.constructor.call(this,SVG.create("defs"))},SVG.Defs.prototype=new SVG.Element,SVG.Utils.merge(SVG.Defs,SVG.Container),SVG.Utils.merge(SVG.Defs,{clipPath:function(){var e=new SVG.Clip;return this.add(e),e}}),SVG.Shape=function(t){this.constructor.call(this,t)},SVG.Shape.prototype=new SVG.Element,SVG.Utils.merge(SVG.Shape,{fill:function(e){return e.color!=null&&this.attr("fill",e.color),e.opacity!=null&&this.attr("fill-opacity",e.opacity),this},stroke:function(e){return e.color&&this.attr("stroke",e.color),e.width!=null&&this.attr("stroke-width",e.width),e.opacity!=null&&this.attr("stroke-opacity",e.opacity),this.attrs["fill-opacity"]==null&&this.fill({opacity:0}),this}}),SVG.Rect=function(){this.constructor.call(this,SVG.create("rect"))},SVG.Rect.prototype=new SVG.Shape,SVG.Circle=function(){this.constructor.call(this,SVG.create("circle"))},SVG.Circle.prototype=new SVG.Shape,SVG.Utils.merge(SVG.Circle,{move:function(e,t){return this.attrs.x=e,this.attrs.y=t,this.center(),this},size:function(e,t){return this.attr("r",e/2),this.center(),this},center:function(e,t){var n=this.attrs.r||0;this.attr("cx",e||(this.attrs.x||0)+n),this.attr("cy",t||(this.attrs.y||0)+n)}}),SVG.Ellipse=function(){this.constructor.call(this,SVG.create("ellipse"))},SVG.Ellipse.prototype=new SVG.Shape,SVG.Utils.merge(SVG.Ellipse,{move:function(e,t){return this.attrs.x=e,this.attrs.y=t,this.center(),this},size:function(e,t){return this.attr("rx",e/2),this.attr("ry",t/2),this.center(),this},center:function(e,t){this.attr("cx",e||(this.attrs.x||0)+(this.attrs.rx||0)),this.attr("cy",t||(this.attrs.y||0)+(this.attrs.ry||0))}}),SVG.Path=function(){this.constructor.call(this,SVG.create("path"))},SVG.Path.prototype=new SVG.Shape,SVG.Utils.merge(SVG.Path,{data:function(e){return this.attr("d",e),this}}),SVG.Image=function(){this.constructor.call(this,SVG.create("image"))},SVG.Image.prototype=new SVG.Element,SVG.Utils.merge(SVG.Image,SVG.Container),SVG.Utils.merge(SVG.Image,{load:function(e){return this.attr("href",e,SVG.xlink),this}}),SVG.G=function(){this.constructor.call(this,SVG.create("g"))},SVG.G.prototype=new SVG.Element,SVG.Utils.merge(SVG.G,SVG.Container),SVG.Utils.merge(SVG.G,{rotate:function(e){return this.attr("transform","rotate("+e+")"),this}});var e=0;SVG.Clip=function(){this.constructor.call(this,SVG.create("clipPath")),this.id="_"+e++,this.attr("id",this.id)},SVG.Clip.prototype=new SVG.Element,SVG.Utils.merge(SVG.Clip,SVG.Container)}).call(this);
\ No newline at end of file

diff --git a/src/shape.js b/src/shape.js
index 236a066f5a59b4f18decd8310713f6e481e9e8f6..1a32a00f83d7bef90f2c3c60f4579879a89ed279 100644 (file)
--- a/src/shape.js
+++ b/src/shape.js
@@ -4,4 +4,37 @@ SVG.Shape = function Shape(element) {
 };
 
 // inherit from SVG.Element
-SVG.Shape.prototype = new SVG.Element();
\ No newline at end of file
+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