Merged all changes and fixes from SVG 1.1 into this branch

1 files changed, 74 insertions, 38 deletions

diff --git a/README.md b/README.md
index 264f488..4ad0358 100755
--- a/README.md
+++ b/README.md
@@ -12,9 +12,9 @@ See [svgjs.com](http://svgjs.com) for an introduction, [documentation](http://do
 
 ## Usage
 
-### Create a SVG document
+### Create an SVG document
 
-Use the `SVG()` function to create a SVG document within a given html element:
+Use the `SVG()` function to create an SVG document within a given html element:
 
 ```javascript
 var draw = SVG('drawing').size(300, 300)
@@ -83,7 +83,7 @@ SVG.on(window, 'resize', function() { draw.spof() })
 ## Parent elements
 
 ### Main svg document
-The main SVG.js initializer function creates a root svg node in the given element and retuns an instance of `SVG.Doc`:
+The main SVG.js initializer function creates a root svg node in the given element and returns an instance of `SVG.Doc`:
 
 ```javascript
 var draw = SVG('drawing')
@@ -177,7 +177,7 @@ The `<defs>` element is a container element for referenced elements. Elements th
 var defs = draw.defs()
 ```
 
-The defs are also availabel on any other element through the `doc()` method:
+The defs are also available on any other element through the `doc()` method:
 
 ```javascript
 var defs = rect.doc().defs()
@@ -802,6 +802,15 @@ var use  = draw.use(rect).move(200, 200)
 
 In this way the rect element acts as a library element. You can edit it but it won't be rendered.
 
+Another way is to point an external SVG file, just specified the element `id` and path to file.
+
+```javascript
+var use  = draw.use('elementId', 'path/to/file.svg')
+```
+
+This way is usefull when you have complex images already created.
+Note that, for external images (outside your domain) it may be necessary to load the file with XHR.
+
 __`returns`: `SVG.Use`__
 
 _Javascript inheritance stack: `SVG.Use` < `SVG.Shape` < `SVG.Element`_
@@ -1026,7 +1035,7 @@ group.has(rect) //-> returns false
 __`returns`: `boolean`__
 
 ### index()
-Returns the index of given element and retuns -1 when it is not a child:
+Returns the index of given element and returns -1 when it is not a child:
 
 ```javascript
 var rect  = draw.rect(100, 50)
@@ -1414,7 +1423,7 @@ Set the size of an element by a given `width` and `height`:
 rect.size(200, 300)
 ```
 
-Proporional resizing is also possible by leaving out `height`:
+Proportional resizing is also possible by leaving out `height`:
 
 ```javascript
 rect.size(200)
@@ -1710,7 +1719,7 @@ var length = path.length()
 __`returns`: `number`__
 
 ### pointAt()
-Get get point on a path at given length:
+Get point on a path at given length:
 
 ```javascript
 var point = path.pointAt(105) //-> returns { x : 96.88497924804688, y : 58.062747955322266 }
@@ -1744,7 +1753,7 @@ If you include the sugar.js module, `fill()`, `stroke()`, `rotate()`, `skew()`,
 rect.animate().rotate(45).skew(25, 0)
 ```
 
-You can also animate non-numeric unit values unsing the `attr()` method:
+You can also animate non-numeric unit values using the `attr()` method:
 ```javascript
 rect.attr('x', '10%').animate().attr('x', '50%')
 ```
@@ -1797,7 +1806,7 @@ Pausing an animations is fairly straightforward:
 ```javascript
 rect.animate().move(200, 200)
 
-rect.mouseenter(function() { this.pause() })
+rect.mouseover(function() { this.pause() })
 ```
 
 __`returns`: `itself`__
@@ -1808,8 +1817,8 @@ Will start playing a paused animation:
 ```javascript
 rect.animate().move(200, 200)
 
-rect.mouseenter(function() { this.pause() })
-rect.mouseleave(function() { this.play() })
+rect.mouseover(function() { this.pause() })
+rect.mouseout(function() { this.play() })
 ```
 __`returns`: `itself`__
 
@@ -2649,7 +2658,7 @@ path.marker('end', 20, 20, function(add) {
 The `marker()` method can be used in three ways. Firstly, a marker can be created on any container element (e.g. svg, nested, group, ...). This is useful if you plan to reuse the marker many times so it will create a marker in the defs but not show it yet:
 
 ```javascript
-var marker = draw.marker(10, 10, function() {
+var marker = draw.marker(10, 10, function(add) {
   add.rect(10, 10)
 })
 ```
@@ -2657,7 +2666,7 @@ var marker = draw.marker(10, 10, function() {
 Secondly a marker can be created and applied directly on its target element:
 
 ```javascript
-path.marker('start', 10, 10, function() {
+path.marker('start', 10, 10, function(add) {
   add.circle(10).fill('#f06')
 })
 ```
@@ -2841,7 +2850,7 @@ Removing it is quite as easy:
 rect.click(null)
 ```
 
-All available evenets are: `click`, `dblclick`, `mousedown`, `mouseup`, `mouseover`, `mouseout`, `mousemove`, `mouseenter`, `mouseleave`, `touchstart`, `touchmove`, `touchleave`, `touchend` and `touchcancel`.
+All available events are: `click`, `dblclick`, `mousedown`, `mouseup`, `mouseover`, `mouseout`, `mousemove`, `touchstart`, `touchmove`, `touchleave`, `touchend` and `touchcancel`.
 
 __`returns`: `itself`__
 
@@ -2891,17 +2900,11 @@ SVG.off(window, 'click', click)
 ```
 
 ### Custom events
-You can even create your own events.
+You can even use your own events.
 
-The only thing you need to do is register your own event:
-
-```javascript
-SVG.registerEvent('my:event')
-```
-
-Next you can add an event listener for your newly created event:
+Just add an event listener for your event:
 ```javascript
-rect.on('my:event', function() {
+rect.on('myevent', function() {
   alert('ta-da!')
 })
 ```
@@ -2910,27 +2913,42 @@ Now you are ready to fire the event whenever you need:
 
 ```javascript
 function whenSomethingHappens() {
-  rect.fire('my:event') 
+  rect.fire('myevent') 
 }
 ```
 
-Additionally you can pass an object as second argument to the `fire()` method:
+You can also pass some data to the event:
 
 ```javascript
 function whenSomethingHappens() {
-  rect.fire('my:event', { shout: 'SVG.js is the best!' }) 
+  rect.fire('myevent', {some:'data'}) 
 }
+
+rect.on('myevent', function(e) {
+  alert(e.detail.some) // outputs 'data'
+})
 ```
 
-The object will be passed in the event's `detail` property:
+svg.js supports namespaced events following the syntax `event.namespace`.
 
-```javascript
-rect.on('my:event', function(event) {
-  alert(event.detail.shout)
+A namespaced event behaves like a normal event with the difference that you can remove it without touching handlers from other namespaces.
+
+```
+// attach
+rect.on('myevent.namespace', function(e) {
+  // do something
 })
+
+// detach all handlers of namespace
+rect.off('myevent.namespace')
+
+// detach all handlers including all namespaces
+rect.off('myevent)
 ```
 
-_Important: always make sure you namespace your event to avoid conflicts. Preferably use something very specific. So `wicked:event` for example would be better than something generic like `svg:event`._
+However you can't fire a specific namespaced event. Calling `rect.fire('myevent.namespace')` won't do anything while `rect.fire('myevent')` works and fires all attached handlers of the event
+
+_Important: always make sure you namespace your event to avoid conflicts. Preferably use something very specific. So `event.wicked` for example would be better than something generic like `event.svg`._
 
 ## Numbers
 
@@ -3106,7 +3124,7 @@ The dynamic representation:
 ]
 ```
 
-Precompiling it as a `SVG.PointArray`:
+Precompiling it as an `SVG.PointArray`:
 
 ```javascript
 new SVG.PointArray([
@@ -3140,7 +3158,7 @@ The dynamic representation:
 ]
 ```
 
-Precompiling it as a `SVG.PathArray`:
+Precompiling it as an `SVG.PathArray`:
 
 ```javascript
 new SVG.PathArray([
@@ -3533,7 +3551,7 @@ __`returns`: `string`__
 ## Extending functionality
 
 ### SVG.invent()
-Creating your own custom elements with SVG.js is piece of cake thanks to the `SVG.invent` function. For the sake of this example, lets "invent" a shape. We want a `rect` with rounded corners that are always proportional to the height of the element. The new shape lives in the `SVG` namespace and is called `Rounded`. Here is how we achieve that.
+Creating your own custom elements with SVG.js is a piece of cake thanks to the `SVG.invent` function. For the sake of this example, lets "invent" a shape. We want a `rect` with rounded corners that are always proportional to the height of the element. The new shape lives in the `SVG` namespace and is called `Rounded`. Here is how we achieve that.
 
 ```javascript
 SVG.Rounded = SVG.invent({
@@ -3576,19 +3594,19 @@ var rounded = draw.rounded(200, 100)
 That's it, the invention is now ready to be used!
 
 #### Accepted values
-The `SVG.invent()` function always expectes an object. The object can have the following configuration values:
+The `SVG.invent()` function always expects an object. The object can have the following configuration values:
 
 - `create`: can be either a string with the node name (e.g. `rect`, `ellipse`, ...) or a custom initializer function; `[required]`
 - `inherit`: the desired SVG.js class to inherit from (e.g. `SVG.Shape`, `SVG.Element`, `SVG.Container`, `SVG.Rect`, ...); `[optional but recommended]`
 - `extend`: an object with the methods that should be applied to the element's prototype; `[optional]`
-- `construct`: an objects with the methods to create the element on the parent element; `[optional]`
+- `construct`: an object with the methods to create the element on the parent element; `[optional]`
 - `parent`: an SVG.js parent class on which the methods in the passed `construct` object should be available; `[optional]`
 
 Svg.js uses the `SVG.invent()` function to create all internal elements, so have a look at the source to see how this function is used in various ways.
 
 
 ### SVG.extend()
-Svg.js has a modular structure. It is very easy to add you own methods at different levels. Let's say we want to add a method to all shape types then we would add our method to SVG.Shape:
+SVG.js has a modular structure. It is very easy to add you own methods at different levels. Let's say we want to add a method to all shape types then we would add our method to SVG.Shape:
 
 ```javascript
 SVG.extend(SVG.Shape, {
@@ -3637,12 +3655,19 @@ SVG.extend(SVG.Ellipse, SVG.Path, SVG.Polygon, {
 ## Plugins
 Here are a few nice plugins that are available for SVG.js:
 
+** Caution: Not tested for SVG.js 2.0 **
+
 ### absorb
-[svg.absorb.js](https://github.com/wout/svg.absorb.js) absorb raw SVG data into a SVG.js instance.
+[svg.absorb.js](https://github.com/wout/svg.absorb.js) absorb raw SVG data into an SVG.js instance.
 
 ### draggable
 [svg.draggable.js](https://github.com/wout/svg.draggable.js) to make elements draggable.
 
+### connectable
+[svg.connectable.js](https://github.com/jillix/svg.connectable.js) to connect elements.
+
+[svg.connectable.js fork](https://github.com/loredanacirstea/svg.connectable.js) to connect elements (added: curved connectors, you can use any self-made path as a connector, choosable 'center'/'perifery' attachment, 'perifery' attachment for source / target SVG Paths uses smallest-distance algorithm between PathArray points)
+
 ### easing
 [svg.easing.js](https://github.com/wout/svg.easing.js) for more easing methods on animations.
 
@@ -3676,6 +3701,17 @@ Here are a few nice plugins that are available for SVG.js:
 ### wiml
 [svg.wiml.js](https://github.com/wout/svg.wiml.js) a templating language for svg output.
 
+### comic
+[comic.js](https://github.com/balint42/comic.js) to cartoonize any given svg.
+
+### draw
+[svg.draw.js](https://github.com/fuzzyma/svg.draw.js) to draw elements with your mouse
+
+### select
+[svg.select.js](https://github.com/fuzzyma/svg.select.js) to select elements
+
+### resize
+[svg.resize.js](https://github.com/fuzzyma/svg.resize.js) to resize elements with your mouse
 
 ## Contributing
 We love contributions. Yes indeed, we used the word LOVE! But please make sure you follow the same coding style. Here are some guidelines.