diff options
| -rw-r--r-- | README.md | 64 | ||||
| -rw-r--r-- | dist/svg.js | 33 | ||||
| -rw-r--r-- | dist/svg.min.js | 2 | ||||
| -rw-r--r-- | src/shape.js | 35 |
4 files changed, 111 insertions, 23 deletions
@@ -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 62d32af..f0b8cc8 100644 --- 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 e5c2696..c8f59e5 100644 --- 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 236a066..1a32a00 100644 --- 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 |