### 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);
</svg>
</div>
```
-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
### 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);
```
```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);
```
```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!');
```
## 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
### 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);
```
```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
{ 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);
## 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) {
});
```
-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);
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);
```
```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 });
});
```
-The complete inheritance stack for 'SVG.Circle' is:
+The complete inheritance stack for `SVG.Circle` is:
_SVG.Circle < SVG.Shape < SVG.Element_
-/* 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<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,0)),this._defs},level:function(){var e=this.defs();return this.remove(e).add(e,0),this},group:function(){var e=new SVG.G;return this.add(e),e},rect:function(e,t){var n=(new SVG.Rect).size(e,t);return this.add(n),n},circle:function(e){var t=(new SVG.Circle).size(e);return this.add(t),t},ellipse:function(e,t){var n=(new SVG.Ellipse).size(e,t);return this.add(n),n},path:function(e){var t=(new SVG.Path).plot(e);return this.add(t),t},image:function(e){var t=(new SVG.Image).load(e);return this.add(t),t},text:function(e){var t=(new SVG.Text).text(e);return this.add(t),t},gradient:function(e,t){return this.defs().gradient(e,t)},stage:function(){var e,t=this;return e=function(){document.readyState==="complete"?(t.attr("style","position:absolute;left:0;top:0;"),setTimeout(function(){t.attr("style","position:relative;")},5)):setTimeout(e,10)},e(),this}},SVG.Element=function(t){this.node=t,this.attrs={},this.trans={x:0,y:0,scaleX:1,scaleY:1,rotation:0,skewX:0,skewY:0},this._s="size family weight stretch variant style".split(" ")},SVG.extend(SVG.Element,{move:function(e,t){return this.attr({x:e,y:t})},size:function(e,t){return this.attr({width:e,height:t})},remove:function(){return this.parent!=null?this.parent.remove(this):void 0},parentDoc:function(){return this._parent(SVG.Doc)},attr:function(e,t,n){if(arguments.length<2){if(typeof e!="object")return this._isStyle(e)?e=="text"?this.content:e=="leading"?this[e]:this.style[e]:this.attrs[e];for(t in e)this.attr(t,e[t])}else{this.attrs[e]=t;if(e=="x"&&this._isText())for(var r=this.lines.length-1;r>=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<l;t++)r=(new n).text(o[t]).attr({dy:this.style["font-size"]*this.leading,x:this.attr("x")||0,style:i}),this.node.appendChild(r.node),this.lines.push(r);return this.attr("style",i)},_style:function(){var e,t="",n=this._s;for(e=n.length-1;e>=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
projects / svg.js.git / commitdiff