From af6df99a9f027cd984cc5c0454cf08c3bbbc11ff Mon Sep 17 00:00:00 2001 From: wout Date: Thu, 27 Dec 2012 14:04:36 +0100 Subject: [PATCH] Updated README --- README.md | 47 +++++++++++++++++++++++++---------------------- dist/svg.js | 2 +- dist/svg.min.js | 2 +- 3 files changed, 27 insertions(+), 24 deletions(-) diff --git a/README.md b/README.md index fef40dd..f525ef5 100644 --- a/README.md +++ b/README.md @@ -9,7 +9,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); @@ -25,11 +25,10 @@ This will generate the following output: ``` -If the svg canvas should follow the dimensions of its parent, in this case '#paper', you can also use a percentage value: +By default the svg canvas follows the dimensions of its parent, in this case `#paper`: ```javascript var draw = svg('paper').size('100%', '100%'); ``` -By default the width and height are set to 100% so you will not need it very often. ## Elements @@ -42,11 +41,11 @@ var text = draw.rect(100, 100); ### Ellipse -Ellipses, like rects, have two arguments, their width and height: +Ellipses, like rects, have two arguments, their `width` and `height`: ```javascript var ellipse = draw.ellipse(100, 100); ``` -This element type has an extra method to move it by its 'cx' and 'cy' values: +This element type has an extra method to move it by its `cx` and `cy` values: ```javascript ellipse.center(150, 150); ``` @@ -56,7 +55,7 @@ The only argument necessary for a circle is the diameter: ```javascript var circle = draw.circle(100); ``` -Like ellipse this element type has an extra method to move it by its 'cx' and 'cy' values: +Like ellipse this element type has an extra method to move it by its `cx` and `cy` values: ```javascript circle.center(150, 150); ``` @@ -67,7 +66,7 @@ The first argument of a text element is the actual text content: ```javascript var text = draw.text("svg\nto\nthe\npoint.").move(300, 0); ``` -Changing text afterwards is also possible with the 'text()' method: +Changing text afterwards is also possible with the `text()` method: ```javascript text.text('Brilliant!'); ``` @@ -106,7 +105,7 @@ http://www.w3.org/TR/SVG/paths.html#PathData ## Manipulating elements ### Attributes -You can get and set an element's attributes directly using 'attr()': +You can get and set an element's attributes directly using `attr()`: ```javascript // get a single attribute @@ -156,7 +155,7 @@ Important: matrix transformations are not yet supported. ### Move -Move the element to a given x and y position by its upper left corner: +Move the element to a given `x` and `y` position by its upper left corner: ```javascript rect.move(200, 350); ``` @@ -164,15 +163,15 @@ 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 always 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 with the 'x' and 'y' attributes, circle and ellipse use their centre with the 'cx' and 'cy' attributes and thereby simply ignoring the 'x' and 'y' values you might assign. +Although `move()` is much more convenient because it will always use the upper left corner as the position reference, whereas with using `attr()` the `x` and `y` reference differ between element types. For example, rect uses the upper left corner with the `x` and `y` attributes, circle and ellipse use their centre with the `cx` and `cy` attributes and thereby simply ignoring the `x` and `y` values you might assign. ### Size -Set the size of an element by a given width and height: +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()' method is much more convenient. +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()` method is much more convenient. ### Removing elements @@ -193,31 +192,35 @@ This will return an object with the following values: { height: 20, width: 20, y: 20, x: 10, cx: 30, cy: 20 } ``` -As opposed to the built-in `getBBox()` method any translations used with the `transform()` method will be taken into account. +As opposed to the native `getBBox()` method any translations used with the `transform()` method will be taken into account. ## Syntax sugar Fill and stroke are used quite often. Therefore two convenience methods are provided: ### Fill -The 'fill()' method is a pretty alternative to the 'attr()' method: +The `fill()` method is a pretty alternative to the `attr()` method: ```javascript rect.fill({ color: '#f06', opacity: 0.6 }); ``` ### Stroke -The 'stroke()' method is similar to 'fill()': +The `stroke()` method is similar to `fill()`: + ```javascript rect.stroke({ color: '#f06', opacity: 0.6, width: 5 }); ``` ### Rotate -The 'rotate()' method will automatically rotate elements according to the centre of the element: +The `rotate()` method will automatically rotate elements according to the centre of the element: + ```javascript // rotate(degrees) rect.rotate(45); ``` + Unless you also define a rotation point: + ```javascript // rotate(degrees, cx, cy) rect.rotate(45, 100, 100); @@ -227,9 +230,9 @@ _This functionality requires the sugar.js module which is included in the defaul ## Clipping elements -Clipping elements can be done with either 'clip()' or 'clipTo()'. +Clipping elements can be done with either `clip()` or `clipTo()`. -Using 'clip()' creates a clip path in the parents 'defs' node, and passes it to a block: +Using `clip()` creates a clip path in the parents 'defs' node, and passes it to a block: ```javascript rect.clip(function(clipPath) { @@ -237,7 +240,7 @@ rect.clip(function(clipPath) { }); ``` -You can also reuse clip paths for multiple elements using 'clipTo()'. +You can also reuse clip paths for multiple elements using `clipTo()`. ```javascript var clipPath = doc.defs().clip(); clipRect = clipPath.rect(80, 80).move(10, 10); @@ -289,7 +292,7 @@ var gradient = draw.gradient('linear', function(stop) { stop.at({ offset: 100, color: '#fff', opacity: 1 }); }); ``` -The 'offset' and 'color' parameters are required for stops, 'opacity' is optional. Offset is an integer expressed in percentage. To define the direction you can set from x, y and to x, y: +The `offset` and `color` parameters are required for stops, `opacity` is optional. Offset is an integer expressed in percentage. To define the direction you can set from `x`, `y` and to `x`, `y`: ```javascript gradient.from(0, 0).to(0, 100); ``` @@ -298,7 +301,7 @@ Finally, to use the gradient on an element: ```javascript rect.attr({ fill: gradient.fill() }); ``` -Radial gradients have a 'radius()' method to define the outermost radius to where the inner color should develop: +Radial gradients have a `radius()` method to define the outermost radius to where the inner color should develop: ```javascript var gradient = draw.gradient('radial', function(stop) { stop.at({ offset: 0, color: '#333', opacity: 1 }); @@ -355,7 +358,7 @@ SVG.extend(SVG.Circle, { }); ``` -The complete inheritance stack for 'SVG.Circle' is: +The complete inheritance stack for `SVG.Circle` is: _SVG.Circle < SVG.Shape < SVG.Element_ diff --git a/dist/svg.js b/dist/svg.js index 0af08a8..39d2b66 100644 --- a/dist/svg.js +++ b/dist/svg.js @@ -1,4 +1,4 @@ -/* svg.js v0.1-27-g819c6e5 - svg container element group arrange defs clip gradient doc shape rect circle ellipse path image text sugar - svgjs.com/license */ +/* svg.js v0.1-28-gb0360d1 - svg container element group arrange defs clip gradient doc shape rect circle ellipse path image text sugar - svgjs.com/license */ (function() { this.SVG = { diff --git a/dist/svg.min.js b/dist/svg.min.js index 83c9354..4762a1b 100644 --- a/dist/svg.min.js +++ b/dist/svg.min.js @@ -1,2 +1,2 @@ -/* svg.js v0.1-27-g819c6e5 - svg container element group arrange defs clip gradient doc shape rect circle ellipse path image text sugar - svgjs.com/license */ +/* svg.js v0.1-28-gb0360d1 - svg container element group arrange defs clip gradient doc shape rect circle ellipse path image text sugar - svgjs.com/license */ function svg(e){return new SVG.Doc(e)}(function(){function n(){this.constructor.call(this,SVG.create("tspan"))}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)},extend:function(e,t){for(var n in t)e.prototype[n]=t[n]}},SVG.Container={add:function(e,t){return this.has(e)||(t=t==null?this.children().length:t,this.children().splice(t,0,e),this.node.insertBefore(e.node,this.node.childNodes[t]||null),e.parent=this),this},has:function(e){return this.children().indexOf(e)>=0},children:function(){return this._children||(this._children=[])},remove:function(e){return this.removeAt(this.children().indexOf(e))},removeAt:function(e){if(0<=e&&e=0;r--)this.lines[r].attr(e,t);else n!=null?this.node.setAttributeNS(n,e,t):this.node.setAttribute(e,t);this._isStyle(e)&&(e=="text"?this.text(t):e=="leading"?this[e]=t:this.style[e]=t,this.text(this.content))}return this},transform:function(e){if(typeof e=="string")return this.trans[e];var t,n=[],r=this.bbox(),i=this.attr("transform")||"",s=i.match(/[a-z]+\([^\)]+\)/g)||[];for(t in e)e[t]!=null&&(this.trans[t]=e[t]);return e=this.trans,e.rotation!=0&&n.push("rotate("+e.rotation+","+(e.cx!=null?e.cx:r.cx)+","+(e.cy!=null?e.cy:r.cy)+")"),e.scaleX!=1&&e.scaleY!=1&&n.push("scale("+e.sx+","+e.sy+")"),e.skewX!=0&&n.push("skewX("+x.skewX+")"),e.skewY!=0&&n.push("skewY("+x.skewY+")"),e.x!=0&&e.y!=0&&n.push("translate("+e.x+","+e.y+")"),this.attr("transform",n.join(" "))},bbox:function(){var e=this.node.getBBox();return e.x+=this.trans.x,e.y+=this.trans.y,e.cx=e.x+e.width/2,e.cy=e.y+e.height/2,e},_parent:function(e){var t=this;while(t!=null&&!(t instanceof e))t=t.parent;return t},_isStyle:function(e){return typeof e=="string"&&this._isText()?/^font|text|leading/.test(e):!1},_isText:function(){return this instanceof SVG.Text}}),SVG.G=function(){this.constructor.call(this,SVG.create("g"))},SVG.G.prototype=new SVG.Element,SVG.extend(SVG.G,SVG.Container),SVG.extend(SVG.Element,{siblings:function(){return this.parent.children()},forward:function(){var e=this.siblings().indexOf(this);return this.parent.remove(this).add(this,e+1),this},backward:function(){var e,t=this.parent.level();return e=this.siblings().indexOf(this),e>1&&t.remove(this).add(this,e-1),this},front:function(){return this.parent.remove(this).add(this),this},back:function(){var e,t=this.parent.level();return e=this.siblings().indexOf(this),e>1&&t.remove(this).add(this,0),this}}),SVG.Defs=function(){this.constructor.call(this,SVG.create("defs"))},SVG.Defs.prototype=new SVG.Element,SVG.extend(SVG.Defs,SVG.Container);var e=0;SVG.Clip=function(){this.constructor.call(this,SVG.create("clipPath")),this.id="svgjs_clip_"+e++,this.attr("id",this.id)},SVG.Clip.prototype=new SVG.Element,SVG.extend(SVG.Clip,SVG.Container),SVG.extend(SVG.Element,{clip:function(e){var t=this.parent.defs().clip();return e(t),this.clipTo(t)},clipTo:function(e){return this.attr("clip-path","url(#"+e.id+")")}}),SVG.extend(SVG.Defs,{clip:function(){var e=new SVG.Clip;return this.add(e),e}});var t=0;SVG.Gradient=function(n){this.constructor.call(this,SVG.create(n+"Gradient")),this.id="svgjs_grad_"+t++,this.type=n,this.attr("id",this.id)},SVG.Gradient.prototype=new SVG.Element,SVG.extend(SVG.Gradient,SVG.Container),SVG.extend(SVG.Gradient,{from:function(e,t){return this.type=="radial"?this.attr({fx:e+"%",fy:t+"%"}):this.attr({x1:e+"%",y1:t+"%"})},to:function(e,t){return this.type=="radial"?this.attr({cx:e+"%",cy:t+"%"}):this.attr({x2:e+"%",y2:t+"%"})},radius:function(e){return this.type=="radial"?this.attr({r:e+"%"}):this},at:function(e){var t=new SVG.Stop(e);return this.add(t),t},update:function(e){while(this.node.hasChildNodes())this.node.removeChild(this.node.lastChild);return e(this),this},fill:function(){return"url(#"+this.id+")"}}),SVG.extend(SVG.Defs,{gradient:function(e,t){var n=new SVG.Gradient(e);return this.add(n),t(n),n}}),SVG.Stop=function(t){this.constructor.call(this,SVG.create("stop")),this.update(t)},SVG.Stop.prototype=new SVG.Element,SVG.extend(SVG.Stop,{update:function(e){var t="",n=["opacity","color"];for(var r=n.length-1;r>=0;r--)e[n[r]]!=null&&(t+="stop-"+n[r]+":"+e[n[r]]+";");return this.attr({offset:(e.offset!=null?e.offset:this.attr("offset")||0)+"%",style:t})}}),SVG.Doc=function(t){this.constructor.call(this,SVG.create("svg"));var n=document.createElement("div");n.style.cssText="position:relative;width:100%;height:100%;",typeof t=="string"&&(t=document.getElementById(t)),this.attr({xmlns:SVG.ns,version:"1.1",width:"100%",height:"100%"}).attr("xlink",SVG.xlink,SVG.ns).defs(),t.appendChild(n),n.appendChild(this.node),this.stage()},SVG.Doc.prototype=new SVG.Element,SVG.extend(SVG.Doc,SVG.Container),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.extend(SVG.Circle,{move:function(e,t){return this.attrs.x=e,this.attrs.y=t,this.center()},size:function(e){return this.attr("r",e/2).center()},center:function(e,t){var n=this.attrs.r||0;return this.attr({cx:e||(this.attrs.x||0)+n,cy:t||(this.attrs.y||0)+n})}}),SVG.Ellipse=function(){this.constructor.call(this,SVG.create("ellipse"))},SVG.Ellipse.prototype=new SVG.Shape,SVG.extend(SVG.Ellipse,{move:function(e,t){return this.attrs.x=e,this.attrs.y=t,this.center()},size:function(e,t){return this.attr({rx:e/2,ry:t/2}).center()},center:function(e,t){return this.attr({cx:e||(this.attrs.x||0)+(this.attrs.rx||0),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.extend(SVG.Path,{plot:function(e){return this.attr("d",e||"M0,0L0,0")},move:function(e,t){return this.transform({x:e,y:t})}}),SVG.Image=function(){this.constructor.call(this,SVG.create("image"))},SVG.Image.prototype=new SVG.Shape,SVG.extend(SVG.Image,{load:function(e){return this.attr("xlink:href",e,SVG.xlink)}}),SVG.Text=function(){this.constructor.call(this,SVG.create("text")),this.style={"font-size":16,"font-family":"Helvetica","text-anchor":"start"},this.leading=1.2,this.lines=[]},SVG.Text.prototype=new SVG.Shape,SVG.extend(SVG.Text,{text:function(e){this.content=e=e||"text",this.lines=[];var t,r,i=this._style(),s=this.parentDoc(),o=e.split("\n");while(this.node.hasChildNodes())this.node.removeChild(this.node.lastChild);for(t=0,l=o.length;t=0;e--)this.style["font-"+n[e]]!=null&&(t+="font-"+n[e]+":"+this.style["font-"+n[e]]+";");return t+="text-anchor:"+this.style["text-anchor"]+";",t}}),n.prototype=new SVG.Shape,SVG.extend(n,{text:function(e){return this.node.appendChild(document.createTextNode(e)),this}}),SVG.extend(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){e.color&&this.attr("stroke",e.color);var t="width opacity linecap linejoin miterlimit dasharray dashoffset".split(" ");for(var n=t.length-1;n>=0;n--)e[t[n]]!=null&&this.attr("stroke-"+t[n],e[t[n]]);return this}}),SVG.extend(SVG.Element,{rotate:function(e,t,n){var r=this.bbox();return this.transform({rotation:e||0,cx:t==null?r.cx:t,cy:n==null?r.cx:n})}}),SVG.extend(SVG.G,{move:function(e,t){return this.transform({x:e,y:t})}}),SVG.extend(SVG.Text,{font:function(e){var t,n={};for(t in e)t=="leading"?n[t]=e[t]:t=="anchor"?n["text-anchor"]=e[t]:this._s.indexOf(t)>-1?n["font-"+t]=e[t]:void 0;return this.attr(n).text(this.content)}})}).call(this); \ No newline at end of file -- 2.39.5