This is a big one...

### Fixed
 - fixed `zoom()` method of runner which was passed a wrong parameter
 - fixed positioning methods of `TSpan` to position them by its bounding box
 - fixed `flip()` method which flips correctly by center by default now and accepts correct arguments
 - fixed a case in `rbox()` where not always all values of the box were updated
 - fixed `getOrigin()` function used by `transform()` so that all origin (#1085) popssibilities specified in the docs are working
 - fixed positioning of text by its baseline when using `amove()`
 - fixed tons of typings in the svg.d.ts file

### Added
 - added second Parameter to `SVG(el, isHTML)` which allows to explicitely create elements in the HTML namespace (#1058)
 - added `unlink()` and `linker()` to hyperlinked elements to remove or access the underling `<a>` element
 - added `wrap()` method to `Dom` which lets you wrap an element by another one
 - added `orient()` method to `Marker`
 - added `options` parameter to `dispatch()` and `fire()` to allow for more special needs
 - added `newLine()` constructor to `Text` to create a tspan marked as new line (#1088)
 - added lots of tests in es6 format

65 files changed, 2551 insertions, 1338 deletions

diff --git a/.config/karma.conf.common.js b/.config/karma.conf.common.js
index a89c8e6..62005bf 100644
--- a/.config/karma.conf.common.js
+++ b/.config/karma.conf.common.js
@@ -31,7 +31,7 @@ module.exports = function (config) {
         included: false,
         served: true
       },
-      'dist/svg.min.js',
+      'dist/svg.js',
       'spec/spec/*.js'
     ],
 
diff --git a/.config/karma.conf.js b/.config/karma.conf.js
index ccda070..660c1d2 100644
--- a/.config/karma.conf.js
+++ b/.config/karma.conf.js
@@ -23,7 +23,7 @@ module.exports = function (config) {
       // preprocess matching files before serving them to the browser
       // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
       preprocessors: {
-        'dist/svg.min.js': ['coverage']
+        'dist/svg.js': ['coverage']
       },
 
       // this specifies which plugins karma should load
diff --git a/.config/karma.es6.js b/.config/karma.es6.js
index 81605cf..8802c2d 100644
--- a/.config/karma.es6.js
+++ b/.config/karma.es6.js
@@ -33,13 +33,31 @@ module.exports = function (config) {
           type: 'module'
         },
         {
-          pattern: 'spec/spec/*/*.js',
+          pattern: 'spec/spec/*/**/*.js',
           included: true,
           type: 'module'
         }
       ],
 
-      reporters: ['progress'],
+      preprocessors: {
+        'src/**/*.js': ['coverage']
+      },
+
+      reporters: ['progress', 'coverage'],
+      coverageReporter: {
+        // Specify a reporter type.
+        type: 'lcov',
+        dir: 'coverage/',
+        subdir: function (browser) {
+          // normalization process to keep a consistent browser name accross different OS
+          return browser.toLowerCase().split(/[ /-]/)[0] // output the results into: './coverage/firefox/'
+        },
+        instrumenterOptions: {
+          istanbul: {
+              esModules: true
+          }
+        }
+      },
       browsers: ['ChromeHeadless', 'FirefoxHeadless'],
       singleRun: false,
       concurrency: Infinity
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 3250aeb..53817e1 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -7,6 +7,26 @@ The document follows the conventions described in [“Keep a CHANGELOG”](http:
 
 ====
 
+## [3.0.17]
+
+### Fixed
+ - fixed `zoom()` method of runner which was passed a wrong parameter
+ - fixed positioning methods of `TSpan` to position them by its bounding box
+ - fixed `flip()` method which flips correctly by center by default now and accepts correct arguments
+ - fixed a case in `rbox()` where not always all values of the box were updated
+ - fixed `getOrigin()` function used by `transform()` so that all origin (#1085) popssibilities specified in the docs are working
+ - fixed positioning of text by its baseline when using `amove()`
+ - fixed tons of typings in the svg.d.ts file
+
+### Added
+ - added second Parameter to `SVG(el, isHTML)` which allows to explicitely create elements in the HTML namespace (#1058)
+ - added `unlink()` and `linker()` to hyperlinked elements to remove or access the underling `<a>` element
+ - added `wrap()` method to `Dom` which lets you wrap an element by another one
+ - added `orient()` method to `Marker`
+ - added `options` parameter to `dispatch()` and `fire()` to allow for more special needs
+ - added `newLine()` constructor to `Text` to create a tspan marked as new line (#1088)
+ - added lots of tests in es6 format
+
 ## [3.0.16] - 2019-11-12
 
 ### Fixed
diff --git a/package-lock.json b/package-lock.json
index 7776e79..07f71f1 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "@svgdotjs/svg.js",
-  "version": "3.0.14",
+  "version": "3.0.16",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -9661,6 +9661,12 @@
       "integrity": "sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c=",
       "dev": true
     },
+    "typescript": {
+      "version": "3.8.3",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-3.8.3.tgz",
+      "integrity": "sha512-MYlEfn5VrLNsgudQTVJeNaQFUAI7DkhnOjdpAp4T+ku1TfQClewlbSuTVHiA+8skNBgaf02TL/kLOvig4y3G8w==",
+      "dev": true
+    },
     "uglify-js": {
       "version": "3.4.9",
       "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.4.9.tgz",
diff --git a/package.json b/package.json
index 3ccde60..2b494dc 100644
--- a/package.json
+++ b/package.json
@@ -67,7 +67,7 @@
     "test": "npx karma start .config/karma.conf.js",
     "test:ci": "karma start .config/karma.conf.saucelabs.js",
     "test:svgdom": "node -r esm ./spec/runSVGDomTest.js || true",
-    "test:es6": "npx karma start .config/karma.es6.js --single-run",
+    "test:es6": "npx karma start .config/karma.es6.js --single-run || true",
     "zip": "zip -j dist/svg.js.zip -- LICENSE.txt README.md CHANGELOG.md dist/svg.js dist/svg.js.map dist/svg.min.js dist/svg.min.js.map dist/polyfills.js dist/polyfillsIE.js",
     "prepublishOnly": "rm -rf ./dist && npm run build && npm run build:polyfills && npm test",
     "postpublish": "npm run zip"
@@ -110,6 +110,7 @@
     "rollup-plugin-uglify": "^6.0.3",
     "rollup-plugin-uglify-es": "0.0.1",
     "svgdom": "0.0.21",
+    "typescript": "^3.8.3",
     "webpack": "^4.41.2",
     "webpack-cli": "^3.3.10",
     "webpack-dev-server": "^3.9.0",
diff --git a/spec/SpecRunner.html b/spec/SpecRunner.html
index 69c4728..946c970 100644
--- a/spec/SpecRunner.html
+++ b/spec/SpecRunner.html
@@ -76,10 +76,8 @@
   <script src="spec/fx.js"></script>
   <script src="spec/gradient.js"></script>
   <script src="spec/helper.js"></script>
-  <script src="spec/hyperlink.js"></script>
   <script src="spec/image.js"></script>
   <script src="spec/line.js"></script>
-  <script src="spec/marker.js"></script>
   <script src="spec/mask.js"></script>
   <script src="spec/matrix.js"></script>
   <script src="spec/memory.js"></script>
@@ -95,10 +93,8 @@
   <script src="spec/sugar.js"></script>
   <script src="spec/svg.js"></script>
   <script src="spec/symbol.js"></script>
-  <script src="spec/text.js"></script>
   <script src="spec/textpath.js"></script>
   <script src="spec/transformations.js"></script>
-  <script src="spec/tspan.js"></script>
   <script src="spec/use.js"></script>
   <script src="spec/utils.js"></script>
   <script src="spec/morphing.js"></script>
diff --git a/spec/SpecRunnerEs6.html b/spec/SpecRunnerEs6.html
index 3f8f90a..e5629e9 100644
--- a/spec/SpecRunnerEs6.html
+++ b/spec/SpecRunnerEs6.html
@@ -25,7 +25,17 @@
   <script type="module" src="spec/types/Base.js"></script>
   <script type="module" src="spec/types/Box.js"></script>
   <script type="module" src="spec/utils/adopter.js"></script>
+  <script type="module" src="spec/utils/utils.js"></script>
+  <script type="module" src="spec/elements/A.js"></script>
+  <script type="module" src="spec/elements/Dom.js"></script>
+  <script type="module" src="spec/elements/ForeignObject.js"></script>
   <script type="module" src="spec/elements/G.js"></script>
+  <script type="module" src="spec/elements/Marker.js"></script>
+  <script type="module" src="spec/elements/Tspan.js"></script>
+  <script type="module" src="spec/elements/Text.js"></script>
+  <script type="module" src="spec/elememts/TextPath.js"></script>
+  <script type="module" src="spec/modules/core/textable.js"></script>
+  <script type="module" src="spec/modules/core/event.js"></script>
 
 </body>
 </html>
diff --git a/spec/setupBrowser.js b/spec/setupBrowser.js
index 6ec7816..fb68b07 100644
--- a/spec/setupBrowser.js
+++ b/spec/setupBrowser.js
@@ -1,7 +1,8 @@
-import { buildCanvas, buildFixtures, clear } from './helpers.js'
+/* globals beforeEach, afterEach */
+import { buildCanvas, clear } from './helpers.js'
 
 beforeEach(() => {
-  //buildFixtures()
+  // buildFixtures()
   buildCanvas()
   window.container = document.getElementById('canvas')
 })
diff --git a/spec/spec/element.js b/spec/spec/element.js
index 8d685a4..b1686c0 100644
--- a/spec/spec/element.js
+++ b/spec/spec/element.js
@@ -1,88 +1,88 @@
-describe('Element', function() {
+describe('Element', function () {
 
-  beforeEach(function() {
+  beforeEach(function () {
     draw.clear()
     draw.attr('viewBox', null)
   })
 
-  it('should create a circular reference on the node', function() {
-    var rect = draw.rect(100,100)
+  it('should create a circular reference on the node', function () {
+    var rect = draw.rect(100, 100)
     expect(rect.node.instance).toBe(rect)
   })
 
-  describe('attr()', function() {
+  describe('attr()', function () {
     var rect
 
-    beforeEach(function() {
-      rect = draw.rect(100,100)
+    beforeEach(function () {
+      rect = draw.rect(100, 100)
     })
 
-    afterEach(function() {
+    afterEach(function () {
       rect.remove()
-      //draw.defs().find('pattern').forEach(function(el) { el.remove() })
+      // draw.defs().find('pattern').forEach(function(el) { el.remove() })
       draw.defs().clear()
     })
 
-    it('sets one attribute when two arguments are given', function() {
+    it('sets one attribute when two arguments are given', function () {
       rect.attr('fill', '#ff0066')
       expect(rect.node.getAttribute('fill')).toBe('#ff0066')
     })
-    it('sets various attributes when an object is given', function() {
+    it('sets various attributes when an object is given', function () {
       rect.attr({ fill: '#00ff66', stroke: '#ff2233', 'stroke-width': 10 })
       expect(rect.node.getAttribute('fill')).toBe('#00ff66')
       expect(rect.node.getAttribute('stroke')).toBe('#ff2233')
       expect(rect.node.getAttribute('stroke-width')).toBe('10')
     })
-    it('gets the value of the string value given as first argument', function() {
+    it('gets the value of the string value given as first argument', function () {
       rect.attr('fill', '#ff0066')
       expect(rect.attr('fill')).toEqual('#ff0066')
     })
-    it('gets an object with all attributes without any arguments', function() {
+    it('gets an object with all attributes without any arguments', function () {
       rect.attr({ fill: '#00ff66', stroke: '#ff2233' })
       var attr = rect.attr()
       expect(attr.fill).toBe('#00ff66')
       expect(attr.stroke).toBe('#ff2233')
     })
-    it('removes an attribute if the second argument is explicitly set to null', function() {
+    it('removes an attribute if the second argument is explicitly set to null', function () {
       rect.attr('stroke-width', 10)
       expect(rect.node.getAttribute('stroke-width')).toBe('10')
       rect.attr('stroke-width', null)
       expect(rect.node.getAttribute('stroke-width')).toBe(null)
     })
-    it('correctly parses numeric values as a getter', function() {
+    it('correctly parses numeric values as a getter', function () {
       rect.attr('stroke-width', 11)
       expect(rect.node.getAttribute('stroke-width')).toBe('11')
       expect(rect.attr('stroke-width')).toBe(11)
     })
-    it('correctly parses negative numeric values as a getter', function() {
+    it('correctly parses negative numeric values as a getter', function () {
       rect.attr('x', -120)
       expect(rect.node.getAttribute('x')).toBe('-120')
       expect(rect.attr('x')).toBe(-120)
     })
-    it('falls back on default values if attribute is not present', function() {
+    it('falls back on default values if attribute is not present', function () {
       expect(rect.attr('stroke-linejoin')).toBe('miter')
     })
-    it('gets the "style" attribute as a string', function() {
+    it('gets the "style" attribute as a string', function () {
       rect.css('cursor', 'pointer')
       expect(rect.node.style.cursor).toBe('pointer')
     })
-    it('sets the style attribute correctly', function() {
+    it('sets the style attribute correctly', function () {
       rect.attr('style', 'cursor:move;')
       expect(rect.node.style.cursor).toBe('move')
     })
-    it('acts as a global getter when no arguments are given', function() {
+    it('acts as a global getter when no arguments are given', function () {
       rect.fill('#ff0066')
       expect(rect.attr().fill).toBe('#ff0066')
     })
-    it('correctly parses numeric values as a global getter', function() {
+    it('correctly parses numeric values as a global getter', function () {
       rect.stroke({ width: 20 })
       expect(rect.attr()['stroke-width']).toBe(20)
     })
-    it('correctly parses negative numeric values as a global getter', function() {
+    it('correctly parses negative numeric values as a global getter', function () {
       rect.x(-30)
       expect(rect.attr().x).toBe(-30)
     })
-    it('leaves unit values alone as a global getter', function() {
+    it('leaves unit values alone as a global getter', function () {
       rect.attr('x', '69%')
       expect(rect.attr().x).toBe('69%')
     })
@@ -91,31 +91,31 @@ describe('Element', function() {
         x: 1,
         y: 2,
         width: 20,
-        "fill-opacity": 0.5
+        'fill-opacity': 0.5
       })
 
-      expect(rect.attr(["x", "fill-opacity"])).toEqual(jasmine.objectContaining({
+      expect(rect.attr([ 'x', 'fill-opacity' ])).toEqual(jasmine.objectContaining({
         x: 1,
-        "fill-opacity": 0.5
+        'fill-opacity': 0.5
       }))
     })
-    it('creates an image in defs when image path is specified for fill', function() {
+    it('creates an image in defs when image path is specified for fill', function () {
       rect.attr('fill', imageUrl)
       expect(draw.defs().find('pattern').length).toBe(1)
       expect(draw.defs().find('pattern image').length).toBe(1)
       expect(draw.defs().find('pattern image')[0].attr('href')).toBe(imageUrl)
     })
-    it('creates pattern in defs when image object is specified for fill', function() {
+    it('creates pattern in defs when image object is specified for fill', function () {
       rect.attr('fill', new SVG.Image().load(imageUrl))
       expect(draw.defs().find('pattern').length).toBe(1)
       expect(draw.defs().find('pattern image').length).toBe(1)
       expect(draw.defs().find('pattern image')[0].attr('href')).toBe(imageUrl)
     })
-    it('correctly creates SVG.Array if array given', function() {
-      rect.attr('something', [2,3,4])
+    it('correctly creates SVG.Array if array given', function () {
+      rect.attr('something', [ 2, 3, 4 ])
       expect(rect.attr('something')).toBe('2 3 4')
     })
-    it('redirects to the leading() method when setting leading', function() {
+    it('redirects to the leading() method when setting leading', function () {
       var text = draw.text(loremIpsum)
       spyOn(text, 'leading')
 
@@ -125,14 +125,14 @@ describe('Element', function() {
     })
   })
 
-  describe('id()', function() {
+  describe('id()', function () {
     var rect
 
-    beforeEach(function() {
-      rect = draw.rect(100,100)
+    beforeEach(function () {
+      rect = draw.rect(100, 100)
     })
 
-    it('generates an id when getting if no id is set on the element', function() {
+    it('generates an id when getting if no id is set on the element', function () {
       expect(rect.attr('id')).toBe(undefined)
       expect(rect.id()).not.toBe(null)
       expect(rect.node.id).not.toBe(null)
@@ -143,107 +143,116 @@ describe('Element', function() {
     //
     //   expect(did + 1).toBe(SVG.did)
     // })
-    it('adds a unique id containing the node name', function() {
+    it('adds a unique id containing the node name', function () {
       rect.id()
 
       expect(rect.attr('id').includes('Rect')).toBe(true)
     })
-    it('gets the value if the id attribute without an argument', function() {
+    it('gets the value if the id attribute without an argument', function () {
       expect(rect.id()).toBe(rect.attr('id'))
     })
-    it('sets the value of the id', function() {
+    it('sets the value of the id', function () {
       rect.id('new_id')
       expect(rect.id()).toBe('new_id')
     })
   })
 
-  describe('css()', function() {
-    it('sets the style with key and value arguments', function() {
-      var rect = draw.rect(100,100).css('cursor', 'crosshair')
+  describe('css()', function () {
+    it('sets the style with key and value arguments', function () {
+      var rect = draw.rect(100, 100).css('cursor', 'crosshair')
       expect(window.stripped(rect.node.style.cssText)).toBe('cursor:crosshair')
     })
-    it('sets multiple styles with an object as the first argument', function() {
-      var rect = draw.rect(100,100).css({ cursor: 'help', display: 'block' })
+    it('sets multiple styles with an object as the first argument', function () {
+      var rect = draw.rect(100, 100).css({ cursor: 'help', display: 'block' })
       expect(window.stripped(rect.node.style.cssText)).toMatch(/cursor:help/)
       expect(window.stripped(rect.node.style.cssText)).toMatch(/display:block/)
       expect(window.stripped(rect.node.style.cssText).length).toBe(('display:block;cursor:help').length)
     })
-    it('gets a style with a string key as the first argument', function() {
-      var rect = draw.rect(100,100).css({ cursor: 'progress', display: 'block' })
+    it('gets a style with a string key as the first argument', function () {
+      var rect = draw.rect(100, 100).css({ cursor: 'progress', display: 'block' })
       expect(rect.css('cursor')).toBe('progress')
     })
-    it('gets multiple sytyles with array as first argument', function() {
-      var rect = draw.rect(100,100).css({ cursor: 'progress', display: 'block' })
-      expect(rect.css(['cursor', 'display'])).toEqual({ cursor: 'progress', display: 'block' })
+    it('gets multiple sytyles with array as first argument', function () {
+      var rect = draw.rect(100, 100).css({ cursor: 'progress', display: 'block' })
+      expect(rect.css([ 'cursor', 'display' ])).toEqual({ cursor: 'progress', display: 'block' })
     })
-    it('gets an object with all styles with zero arguments', function() {
-      var rect = draw.rect(100,100).css({ cursor: 's-resize', display: 'none' })
+    it('gets an object with all styles with zero arguments', function () {
+      var rect = draw.rect(100, 100).css({ cursor: 's-resize', display: 'none' })
       expect(rect.css()).toEqual({ cursor: 's-resize', display: 'none' })
     })
-    it('removes a style if the value is an empty string', function() {
-      var rect = draw.rect(100,100).css({ cursor: 'n-resize', display: '' })
+    it('removes a style if the value is an empty string', function () {
+      var rect = draw.rect(100, 100).css({ cursor: 'n-resize', display: '' })
       expect(rect.css('display')).toBe('')
     })
-    it('removes a style if the value explicitly set to null', function() {
-      var rect = draw.rect(100,100).css('cursor', 'w-resize')
-      expect(rect.css()).toEqual({ cursor:'w-resize' })
+    it('removes a style if the value explicitly set to null', function () {
+      var rect = draw.rect(100, 100).css('cursor', 'w-resize')
+      expect(rect.css()).toEqual({ cursor: 'w-resize' })
       rect.css('cursor', null)
       expect(rect.css('cursor')).toBe('')
     })
   })
 
-  describe('transform()', function() {
+  describe('transform()', function () {
     var rect, ctm
 
-    beforeEach(function() {
-      rect = draw.rect(100,100)
+    beforeEach(function () {
+      rect = draw.rect(100, 100)
     })
 
-    it('gets the current transformation matrix', function() {
+    it('gets the current transformation matrix', function () {
       expect(rect.transform()).toEqual(jasmine.objectContaining({
-        a: 1, b: 0, c: 0, d: 1, e: 0, f: 0,
-        scaleX: 1, scaleY: 1, shear: 0, rotate: 0,
-        translateX: 0, translateY: 0,
+        a: 1,
+        b: 0,
+        c: 0,
+        d: 1,
+        e: 0,
+        f: 0,
+        scaleX: 1,
+        scaleY: 1,
+        shear: 0,
+        rotate: 0,
+        translateX: 0,
+        translateY: 0
       }))
     })
-    it('sets the translation of and element', function() {
-      rect.transform({ translate: [10, 11] })
-      expect(window.matrixStringToArray(rect.node.getAttribute('transform'))).toEqual([1,0,0,1,10,11])
+    it('sets the translation of and element', function () {
+      rect.transform({ translate: [ 10, 11 ] })
+      expect(window.matrixStringToArray(rect.node.getAttribute('transform'))).toEqual([ 1, 0, 0, 1, 10, 11 ])
     })
-    it('performs an absolute translation', function() {
-      rect.transform({ translate: [10, 11] }).transform({ translate: [20, 21] })
-      expect(window.matrixStringToArray(rect.node.getAttribute('transform'))).toEqual([1,0,0,1,20,21])
+    it('performs an absolute translation', function () {
+      rect.transform({ translate: [ 10, 11 ] }).transform({ translate: [ 20, 21 ] })
+      expect(window.matrixStringToArray(rect.node.getAttribute('transform'))).toEqual([ 1, 0, 0, 1, 20, 21 ])
     })
-    it('performs a relative translation with relative flag', function() {
-      rect.transform({ translate: [10, 11] }).transform({ translate: [20, 21] }, true)
-      expect(window.matrixStringToArray(rect.node.getAttribute('transform'))).toEqual([1,0,0,1,30,32])
+    it('performs a relative translation with relative flag', function () {
+      rect.transform({ translate: [ 10, 11 ] }).transform({ translate: [ 20, 21 ] }, true)
+      expect(window.matrixStringToArray(rect.node.getAttribute('transform'))).toEqual([ 1, 0, 0, 1, 30, 32 ])
     })
-    it('sets the scaleX and scaleY of an element', function() {
+    it('sets the scaleX and scaleY of an element', function () {
       rect.transform({ scaleX: 0.5, scaleY: 2 })
-      expect(window.matrixStringToArray(rect.node.getAttribute('transform'))).toEqual([0.5,0,0,2,25,-50])
+      expect(window.matrixStringToArray(rect.node.getAttribute('transform'))).toEqual([ 0.5, 0, 0, 2, 25, -50 ])
     })
-    it('performs a uniform scale with scale given', function() {
+    it('performs a uniform scale with scale given', function () {
       rect.transform({ scale: 3 })
-      expect(window.matrixStringToArray(rect.node.getAttribute('transform'))).toEqual([3,0,0,3,-100,-100])
+      expect(window.matrixStringToArray(rect.node.getAttribute('transform'))).toEqual([ 3, 0, 0, 3, -100, -100 ])
     })
-    it('also works with only skaleX', function() {
+    it('also works with only skaleX', function () {
       rect.transform({ scaleX: 3 })
-      expect(window.matrixStringToArray(rect.node.getAttribute('transform'))).toEqual([3,0,0,1,-100,0])
+      expect(window.matrixStringToArray(rect.node.getAttribute('transform'))).toEqual([ 3, 0, 0, 1, -100, 0 ])
     })
-    it('also works with only skaleY', function() {
+    it('also works with only skaleY', function () {
       rect.transform({ scaleY: 3 })
-      expect(window.matrixStringToArray(rect.node.getAttribute('transform'))).toEqual([1,0,0,3,0,-100])
+      expect(window.matrixStringToArray(rect.node.getAttribute('transform'))).toEqual([ 1, 0, 0, 3, 0, -100 ])
     })
 
-    it('performs an absolute scale by default', function() {
+    it('performs an absolute scale by default', function () {
       rect.transform({ scale: 3 }).transform({ scale: 0.5 })
-      expect(window.matrixStringToArray(rect.node.getAttribute('transform'))).toEqual([0.5,0,0,0.5,25,25])
+      expect(window.matrixStringToArray(rect.node.getAttribute('transform'))).toEqual([ 0.5, 0, 0, 0.5, 25, 25 ])
     })
-    it('performs a relative scale with a relative flag', function() {
+    it('performs a relative scale with a relative flag', function () {
       rect.transform({ scaleX: 0.5, scaleY: 2 }).transform({ scaleX: 3, scaleY: 4 }, true)
-      expect(window.matrixStringToArray(rect.node.getAttribute('transform'))).toEqual([1.5,0,0,8,-25,-350])
+      expect(window.matrixStringToArray(rect.node.getAttribute('transform'))).toEqual([ 1.5, 0, 0, 8, -25, -350 ])
     })
-    it('sets the skewX of an element with center on the element', function() {
+    it('sets the skewX of an element with center on the element', function () {
       ctm = rect.transform({ skewX: 10 }).ctm()
       expect(ctm.a).toBe(1)
       expect(ctm.b).toBe(0)
@@ -252,7 +261,7 @@ describe('Element', function() {
       expect(ctm.e).toBeCloseTo(-8.81634903542325)
       expect(ctm.f).toBe(0)
     })
-    it('sets the skewX of an element with given center', function() {
+    it('sets the skewX of an element with given center', function () {
       ctm = rect.transform({ skewX: 10, ox: 0, oy: 0 }).ctm()
       expect(ctm.a).toBe(1)
       expect(ctm.b).toBe(0)
@@ -261,7 +270,7 @@ describe('Element', function() {
       expect(ctm.e).toBe(0)
       expect(ctm.f).toBe(0)
     })
-    it('sets the skewY of an element', function() {
+    it('sets the skewY of an element', function () {
       ctm = rect.transform({ skewY: -10, ox: 0, oy: 0 }).ctm()
       expect(ctm.a).toBe(1)
       expect(ctm.b).toBeCloseTo(-0.17632698070846498)
@@ -270,7 +279,7 @@ describe('Element', function() {
       expect(ctm.e).toBe(0)
       expect(ctm.f).toBe(0)
     })
-    it('sets the skewX and skewY of an element', function() {
+    it('sets the skewX and skewY of an element', function () {
       ctm = rect.transform({ skewX: 10, skewY: -10, ox: 0, oy: 0 }).ctm()
       expect(ctm.a).toBe(1)
       expect(ctm.b).toBeCloseTo(-0.17632698070846498)
@@ -279,7 +288,7 @@ describe('Element', function() {
       expect(ctm.e).toBe(0)
       expect(ctm.f).toBe(0)
     })
-    it('performs a uniform skew with skew given', function() {
+    it('performs a uniform skew with skew given', function () {
       ctm = rect.transform({ skew: 5, ox: 0, oy: 0 }).ctm()
       expect(ctm.a).toBe(1)
       expect(ctm.b).toBeCloseTo(0.08748866352592401)
@@ -288,7 +297,7 @@ describe('Element', function() {
       expect(ctm.e).toBe(0)
       expect(ctm.f).toBe(0)
     })
-    it('rotates the element around its centre if no rotation point is given', function() {
+    it('rotates the element around its centre if no rotation point is given', function () {
       ctm = rect.center(100, 100).transform({ rotate: 45 }).ctm()
       expect(ctm.a).toBeCloseTo(0.7071068286895752)
       expect(ctm.b).toBeCloseTo(0.7071068286895752)
@@ -297,8 +306,8 @@ describe('Element', function() {
       expect(ctm.e).toBeCloseTo(100)
       expect(ctm.f).toBeCloseTo(-41.421356201171875)
     })
-    it('rotates the element around the given rotation point', function() {
-      ctm = rect.transform({ rotate: 55, origin: [80, 2] }).ctm()
+    it('rotates the element around the given rotation point', function () {
+      ctm = rect.transform({ rotate: 55, origin: [ 80, 2 ] }).ctm()
       expect(ctm.a).toBeCloseTo(0.5735765099525452)
       expect(ctm.b).toBeCloseTo(0.8191521167755127)
       expect(ctm.c).toBeCloseTo(-0.8191521167755127)
@@ -306,63 +315,63 @@ describe('Element', function() {
       expect(ctm.e).toBeCloseTo(35.75218963623047)
       expect(ctm.f).toBeCloseTo(-64.67931365966797)
     })
-    it('transforms element using a matrix', function() {
+    it('transforms element using a matrix', function () {
       rect.transform({ a: 0.5, c: 0.5 })
-      expect(window.matrixStringToArray(rect.node.getAttribute('transform'))).toEqual([0.5,0,0.5,1,0,0])
+      expect(window.matrixStringToArray(rect.node.getAttribute('transform'))).toEqual([ 0.5, 0, 0.5, 1, 0, 0 ])
     })
-    it('transforms relative using a matrix', function() {
+    it('transforms relative using a matrix', function () {
       rect.transform({ a: 0.5, c: 0.5 }).transform(new SVG.Matrix({ e: 20, f: 20 }), true)
-      expect(window.matrixStringToArray(rect.node.getAttribute('transform'))).toEqual([0.5,0,0.5,1,20,20])
+      expect(window.matrixStringToArray(rect.node.getAttribute('transform'))).toEqual([ 0.5, 0, 0.5, 1, 20, 20 ])
     })
-    it('flips the element on x axis', function() {
+    it('flips the element on x axis', function () {
       rect.transform({ flip: 'x' })
-      expect(window.matrixStringToArray(rect.node.getAttribute('transform'))).toEqual([-1,0,0,1,100,0])
+      expect(window.matrixStringToArray(rect.node.getAttribute('transform'))).toEqual([ -1, 0, 0, 1, 100, 0 ])
     })
-    it('flips the element on x axis with offset', function() {
-      rect.transform({ flip: 'x', origin: [20, 0] })
-      expect(window.matrixStringToArray(rect.node.getAttribute('transform'))).toEqual([-1,0,0,1,40,0])
+    it('flips the element on x axis with offset', function () {
+      rect.transform({ flip: 'x', origin: [ 20, 0 ] })
+      expect(window.matrixStringToArray(rect.node.getAttribute('transform'))).toEqual([ -1, 0, 0, 1, 40, 0 ])
     })
-    it('flips the element on y axis with offset', function() {
-      rect.transform({ flip: 'y', origin: [0, 20] })
-      expect(window.matrixStringToArray(rect.node.getAttribute('transform'))).toEqual([1,0,0,-1,0,40])
+    it('flips the element on y axis with offset', function () {
+      rect.transform({ flip: 'y', origin: [ 0, 20 ] })
+      expect(window.matrixStringToArray(rect.node.getAttribute('transform'))).toEqual([ 1, 0, 0, -1, 0, 40 ])
     })
-    it('flips the element on both axis with offset', function() {
-      rect.transform({ flip: 'both', origin: [20, 20] })
-      expect(window.matrixStringToArray(rect.node.getAttribute('transform'))).toEqual([-1,0,0,-1,40,40])
+    it('flips the element on both axis with offset', function () {
+      rect.transform({ flip: 'both', origin: [ 20, 20 ] })
+      expect(window.matrixStringToArray(rect.node.getAttribute('transform'))).toEqual([ -1, 0, 0, -1, 40, 40 ])
     })
-    it('flips the element on both axis', function() {
+    it('flips the element on both axis', function () {
       rect.transform({ flip: 'both' })
-      expect(window.matrixStringToArray(rect.node.getAttribute('transform'))).toEqual([-1,0,0,-1,100,100])
+      expect(window.matrixStringToArray(rect.node.getAttribute('transform'))).toEqual([ -1, 0, 0, -1, 100, 100 ])
     })
   })
 
-  describe('untransform()', function() {
+  describe('untransform()', function () {
     var circle
 
-    beforeEach(function() {
+    beforeEach(function () {
       circle = draw.circle(100).translate(50, 100)
     })
 
-    it('removes the transform attribute', function() {
-      expect(window.matrixStringToArray(circle.node.getAttribute('transform'))).toEqual([1,0,0,1,50,100])
+    it('removes the transform attribute', function () {
+      expect(window.matrixStringToArray(circle.node.getAttribute('transform'))).toEqual([ 1, 0, 0, 1, 50, 100 ])
       circle.untransform()
       expect(circle.node.getAttribute('transform')).toBeNull()
     })
-    it('resets the current transform matix', function() {
-      expect(circle.ctm()).toEqual(new SVG.Matrix(1,0,0,1,50,100))
+    it('resets the current transform matix', function () {
+      expect(circle.ctm()).toEqual(new SVG.Matrix(1, 0, 0, 1, 50, 100))
       circle.untransform()
-      expect(circle.ctm()).toEqual(new SVG.Matrix)
+      expect(circle.ctm()).toEqual(new SVG.Matrix())
     })
   })
 
-  describe('matrixify', function() {
+  describe('matrixify', function () {
     var rect
 
-    beforeEach(function() {
+    beforeEach(function () {
       rect = draw.rect(100, 100)
     })
 
-    it('allow individual transform definitions to be separated by whitespace', function(){
+    it('allow individual transform definitions to be separated by whitespace', function () {
       // One space
       rect.attr('transform', 'translate(20) translate(20)')
       expect(rect.matrixify().toString()).toBe('matrix(1,0,0,1,40,0)')
@@ -372,12 +381,12 @@ describe('Element', function() {
       expect(rect.matrixify().toString()).toBe('matrix(1,0,0,1,-40,0)')
     })
 
-    it('allow individual transform definitions to be separated by a comma', function(){
+    it('allow individual transform definitions to be separated by a comma', function () {
       rect.attr('transform', 'translate(20,16),translate(20)')
       expect(rect.matrixify().toString()).toBe('matrix(1,0,0,1,40,16)')
     })
 
-    it('allow individual transform definitions to be separated by whitespace and a comma', function(){
+    it('allow individual transform definitions to be separated by whitespace and a comma', function () {
       // Spaces before the comma
       rect.attr('transform', 'translate(20,16)  ,translate(20)')
       expect(rect.matrixify().toString()).toBe('matrix(1,0,0,1,40,16)')
@@ -391,14 +400,13 @@ describe('Element', function() {
       expect(rect.matrixify().toString()).toBe('matrix(1,0,0,1,60,20)')
     })
 
-
-    it('merges non-commutative transformations correctly', function() {
+    it('merges non-commutative transformations correctly', function () {
       // Spaces before the comma
       rect.attr('transform', 'scale(3, 2) translate(20,16)')
       expect(rect.matrixify().toString()).toBe('matrix(3,0,0,2,60,32)')
     })
 
-    it('doesn\'t care if you have matrices there', function() {
+    it('doesn\'t care if you have matrices there', function () {
       // Spaces before the comma
       rect.attr('transform', 'matrix(3, 0, 0, 2, 0, 0) translate(20,16)')
       expect(rect.matrixify().toString()).toBe('matrix(3,0,0,2,60,32)')
@@ -406,26 +414,26 @@ describe('Element', function() {
 
   })
 
-  describe('toParent()', function() {
+  describe('toParent()', function () {
     var nested, g1, g2, rect1
 
-    beforeEach(function() {
+    beforeEach(function () {
       nested = draw.nested()
       g1 = nested.group().translate(20, 20)
       g2 = g1.group().translate(100, 100)
-      rect1 = g2.rect(100,100).scale(2)
-      rect2 = nested.rect(100,100).scale(0.5)
+      rect1 = g2.rect(100, 100).scale(2)
+      rect2 = nested.rect(100, 100).scale(0.5)
     })
 
-    afterEach(function() {
+    afterEach(function () {
       draw.clear()
     })
 
-    it('returns itself when given parent and it is the same', function() {
+    it('returns itself when given parent and it is the same', function () {
       expect(g2.toParent(g2)).toBe(g2)
     })
 
-    it('moves the element to other parent while maintaining the same visal representation', function() {
+    it('moves the element to other parent while maintaining the same visal representation', function () {
       expect(window.roundMatrix(rect1.toParent(nested).matrix()))
         .toEqual(new SVG.Matrix(2, 0, 0, 2, 70, 70))
       expect(rect1.parent()).toEqual(nested)
@@ -435,19 +443,19 @@ describe('Element', function() {
     })
   })
 
-  describe('toRoot()', function() {
+  describe('toRoot()', function () {
     var nested, g1, g2, rect
 
-    beforeEach(function() {
-      rect = draw.rect(100,100)
+    beforeEach(function () {
+      rect = draw.rect(100, 100)
       spyOn(rect, 'toParent')
     })
 
-    afterEach(function() {
+    afterEach(function () {
       draw.clear()
     })
 
-    it('redirects to toParent(root)', function() {
+    it('redirects to toParent(root)', function () {
       rect.toRoot()
       expect(rect.toParent).toHaveBeenCalledWith(rect.root())
     })
@@ -504,105 +512,105 @@ describe('Element', function() {
   //   })
   // })
 
-  describe('ctm()', function() {
+  describe('ctm()', function () {
     var rect
 
-    beforeEach(function() {
+    beforeEach(function () {
       rect = draw.rect(100, 100)
     })
 
-    it('gets the current transform matrix of the element', function() {
+    it('gets the current transform matrix of the element', function () {
       rect.translate(10, 20)
       expect(rect.ctm().toString()).toBe('matrix(1,0,0,1,10,20)')
     })
-    it('returns an instance of SVG.Matrix', function() {
+    it('returns an instance of SVG.Matrix', function () {
       expect(rect.ctm() instanceof SVG.Matrix).toBeTruthy()
     })
   })
 
-  describe('data()', function() {
-    it('sets a data attribute and convert value to json', function() {
-      var rect = draw.rect(100,100).data('test', 'value')
+  describe('data()', function () {
+    it('sets a data attribute and convert value to json', function () {
+      var rect = draw.rect(100, 100).data('test', 'value')
       expect(rect.node.getAttribute('data-test')).toBe('value')
     })
-    it('sets a data attribute and not convert value to json if flagged raw', function() {
-      var rect = draw.rect(100,100).data('test', 'value', true)
+    it('sets a data attribute and not convert value to json if flagged raw', function () {
+      var rect = draw.rect(100, 100).data('test', 'value', true)
       expect(rect.node.getAttribute('data-test')).toBe('value')
     })
-    it('sets multiple data attributes and convert values to json when an object is passed', function() {
-      var rect = draw.rect(100,100).data({
-        forbidden: 'fruit'
-      , multiple: {
-          values: 'in'
-        , an: 'object'
+    it('sets multiple data attributes and convert values to json when an object is passed', function () {
+      var rect = draw.rect(100, 100).data({
+        forbidden: 'fruit',
+        multiple: {
+          values: 'in',
+          an: 'object'
         }
       })
       expect(rect.node.getAttribute('data-forbidden')).toBe('fruit')
       expect(rect.node.getAttribute('data-multiple')).toEqual('{"values":"in","an":"object"}')
     })
-    it('gets data value if only one argument is passed', function() {
-      var rect = draw.rect(100,100).data('test', 101)
+    it('gets data value if only one argument is passed', function () {
+      var rect = draw.rect(100, 100).data('test', 101)
       expect(rect.data('test')).toBe(101)
     })
-    it('gets the raw value when value is no valid json', function() {
-      var rect = draw.rect(100,100).data('test', '{["sd":12}]', true)
+    it('gets the raw value when value is no valid json', function () {
+      var rect = draw.rect(100, 100).data('test', '{["sd":12}]', true)
       expect(rect.data('test')).toBe('{["sd":12}]')
     })
-    it('removes data when null given', function() {
-      var rect = draw.rect(100,100).data('test', '{"sd":12}', true)
+    it('removes data when null given', function () {
+      var rect = draw.rect(100, 100).data('test', '{"sd":12}', true)
       expect(rect.data('test', null).attr('data-test')).toBeFalsy()
     })
-    it('maintains data type for a number', function() {
-      var rect = draw.rect(100,100).data('test', 101)
+    it('maintains data type for a number', function () {
+      var rect = draw.rect(100, 100).data('test', 101)
       expect(typeof rect.data('test')).toBe('number')
     })
-    it('maintains data type for an object', function() {
-      var rect = draw.rect(100,100).data('test', { string: 'value', array: [1,2,3] })
+    it('maintains data type for an object', function () {
+      var rect = draw.rect(100, 100).data('test', { string: 'value', array: [ 1, 2, 3 ] })
       expect(typeof rect.data('test')).toBe('object')
       expect(Array.isArray(rect.data('test').array)).toBe(true)
     })
   })
 
-  describe('remove()', function() {
-    it('removes an element and return it', function() {
-      var rect = draw.rect(100,100)
+  describe('remove()', function () {
+    it('removes an element and return it', function () {
+      var rect = draw.rect(100, 100)
       expect(rect.remove()).toBe(rect)
     })
-    it('removes an element from its parent', function() {
-      var rect = draw.rect(100,100)
+    it('removes an element from its parent', function () {
+      var rect = draw.rect(100, 100)
       rect.remove()
       expect(draw.has(rect)).toBe(false)
     })
   })
 
-  describe('addTo()', function() {
-    it('adds an element to a given parent and returns itself', function() {
-      var rect  = draw.rect(100,100)
-        , group = draw.group()
+  describe('addTo()', function () {
+    it('adds an element to a given parent and returns itself', function () {
+      var rect = draw.rect(100, 100)
+      var group = draw.group()
 
       expect(rect.addTo(group)).toBe(rect)
       expect(rect.parent()).toBe(group)
     })
   })
 
-  describe('putIn()', function() {
-    it('adds an element to a given parent and returns parent', function() {
-      var rect  = draw.rect(100,100)
-        , group = draw.group()
+  describe('putIn()', function () {
+    it('adds an element to a given parent and returns parent', function () {
+      var rect = draw.rect(100, 100)
+      var group = draw.group()
 
       expect(rect.putIn(group)).toBe(group)
       expect(rect.parent()).toBe(group)
     })
   })
 
-  describe('rbox()', function() {
-    it('returns an instance of SVG.Box', function() {
-      var rect = draw.rect(100,100)
+  describe('rbox()', function () {
+    it('returns an instance of SVG.Box', function () {
+      var rect = draw.rect(100, 100)
       expect(rect.rbox() instanceof SVG.Box).toBe(true)
     })
-    it('returns the correct rectangular box', function() {
+    it('returns the correct rectangular box', function () {
       // stroke has to be set in order to get the correct result when calling getBoundingClientRect in IE11
-      var rect = draw.size(200, 150).viewbox(0, 0, 200, 150).rect(105, 210).move(2, 12)//.stroke({width:0})
+      var rect = draw.size(200, 150).viewbox(0, 0, 200, 150).rect(105, 210).move(2, 12)// .stroke({width:0})
       var box = rect.rbox(draw)
       expect(box.x).toBeCloseTo(2)
       expect(box.y).toBeCloseTo(12)
@@ -613,96 +621,95 @@ describe('Element', function() {
     })
   })
 
-  describe('root()', function() {
-    it('returns the parent document', function() {
-      var rect = draw.rect(100,100)
+  describe('root()', function () {
+    it('returns the parent document', function () {
+      var rect = draw.rect(100, 100)
       expect(rect.root()).toBe(draw)
     })
   })
 
-  describe('parent()', function() {
-    it('contains the parent svg', function() {
-      var rect = draw.rect(100,100)
+  describe('parent()', function () {
+    it('contains the parent svg', function () {
+      var rect = draw.rect(100, 100)
       expect(rect.parent()).toBe(draw)
     })
-    it('contains the parent group when in a group', function() {
+    it('contains the parent group when in a group', function () {
       var group = draw.group()
-        , rect = group.rect(100,100)
+      var rect = group.rect(100, 100)
       expect(rect.parent()).toBe(group)
     })
-    it('contains the parent which matches type', function() {
+    it('contains the parent which matches type', function () {
       var group = draw.group()
-        , rect = group.rect(100,100)
+      var rect = group.rect(100, 100)
       expect(rect.parent(SVG.Svg)).toBe(draw)
     })
-    it('contains the parent which matches selector', function() {
+    it('contains the parent which matches selector', function () {
       var group1 = draw.group().addClass('test')
-        , group2 = group1.group()
-        , rect = group2.rect(100,100)
+      var group2 = group1.group()
+      var rect = group2.rect(100, 100)
       expect(rect.parent('.test')).toBe(group1)
     })
   })
 
-  describe('parents()', function() {
-    it('returns array of parents until the passed element or document', function() {
+  describe('parents()', function () {
+    it('returns array of parents until the passed element or root svg', function () {
       var group1 = draw.group().addClass('test')
-        , group2 = group1.group()
-        , group3 = group2.group()
-        , rect = group3.rect(100,100)
+      var group2 = group1.group()
+      var group3 = group2.group()
+      var rect = group3.rect(100, 100)
 
-      expect(rect.parents('.test')[0]).toBe(group3)
-      expect(rect.parents('.test')[1]).toBe(group2)
-      expect(rect.parents(group2)[0]).toBe(group3)
-      expect(rect.parents(group1).length).toBe(2)
+      expect(rect.parents('.test')).toEqual([ group3, group2, group1 ])
+      expect(rect.parents(group2)).toEqual([ group3, group2 ])
+      expect(rect.parents(group1).length).toBe(3)
     })
   })
 
-  describe('clone()', function() {
+  describe('clone()', function () {
     var rect, group, circle
 
-    beforeEach(function() {
-      rect   = draw.rect(100,100).center(321,567).fill('#f06')
-      group  = draw.group().add(rect)
+    beforeEach(function () {
+      rect = draw.rect(100, 100).center(321, 567).fill('#f06')
+      group = draw.group().add(rect)
       circle = group.circle(100)
     })
 
-    it('makes an exact copy of the element', function() {
+    it('makes an exact copy of the element', function () {
       clone = rect.clone()
       expect(clone.attr('id', null).attr()).toEqual(rect.attr('id', null).attr())
     })
-    it('assigns a new id to the cloned element', function() {
+    it('assigns a new id to the cloned element', function () {
       clone = rect.clone()
       expect(clone.id()).not.toBe(rect.id())
     })
-    it('copies all child nodes as well', function() {
+    it('copies all child nodes as well', function () {
       clone = group.clone()
       expect(clone.children().length).toBe(group.children().length)
     })
-    it('assigns a new id to cloned child elements', function() {
+    it('assigns a new id to cloned child elements', function () {
       clone = group.clone()
       expect(clone.id()).not.toEqual(group.id())
       expect(clone.get(0).id()).not.toBe(group.get(0).id())
       expect(clone.get(1).id()).not.toBe(group.get(1).id())
     })
-    it('deep copies over dom data', function() {
-      group.dom = {'foo':'bar'}
-      rect.dom = {'foo':'baz'}
+    it('deep copies over dom data', function () {
+      group.dom = { foo: 'bar' }
+      rect.dom = { foo: 'baz' }
       clone = group.clone()
       expect(clone.dom.foo).toBe('bar')
       expect(clone.get(0).dom.foo).toBe('baz')
     })
   })
 
-  describe('toString()', function() {
-    it('returns the element id', function() {
-      var rect = draw.rect(100,100).center(321,567).fill('#f06')
+  describe('toString()', function () {
+    it('returns the element id', function () {
+      var rect = draw.rect(100, 100).center(321, 567).fill('#f06')
       expect(rect + '').toBe(rect.id())
     })
   })
 
-  describe('replace()', function() {
-    it('replaces the original element by another given element', function() {
-      var rect = draw.rect(100,100).center(321,567).fill('#f06')
+  describe('replace()', function () {
+    it('replaces the original element by another given element', function () {
+      var rect = draw.rect(100, 100).center(321, 567).fill('#f06')
       var circle = draw.circle(200)
       var rectIndex = draw.children().indexOf(rect)
 
@@ -710,191 +717,191 @@ describe('Element', function() {
 
       expect(rectIndex).toBe(draw.children().indexOf(circle))
     })
-    it('removes the original element', function() {
-      var rect = draw.rect(100,100).center(321,567).fill('#f06')
+    it('removes the original element', function () {
+      var rect = draw.rect(100, 100).center(321, 567).fill('#f06')
 
       rect.replace(draw.circle(200))
 
       expect(draw.has(rect)).toBe(false)
     })
-    it('returns the new element', function() {
-      var circle  = draw.circle(200)
-      var element = draw.rect(100,100).center(321,567).fill('#f06').replace(circle)
+    it('returns the new element', function () {
+      var circle = draw.circle(200)
+      var element = draw.rect(100, 100).center(321, 567).fill('#f06').replace(circle)
 
       expect(element).toBe(circle)
     })
   })
 
-  describe('classes()', function() {
-    it('returns an array of classes on the node', function() {
-      var element = draw.rect(100,100)
+  describe('classes()', function () {
+    it('returns an array of classes on the node', function () {
+      var element = draw.rect(100, 100)
       element.node.setAttribute('class', 'one two')
-      expect(element.classes()).toEqual(['one', 'two'])
+      expect(element.classes()).toEqual([ 'one', 'two' ])
     })
   })
 
-  describe('hasClass()', function() {
-    it('returns true if the node has the class', function() {
-      var element = draw.rect(100,100)
+  describe('hasClass()', function () {
+    it('returns true if the node has the class', function () {
+      var element = draw.rect(100, 100)
       element.node.setAttribute('class', 'one')
       expect(element.hasClass('one')).toBeTruthy()
     })
 
-    it('returns false if the node does not have the class', function() {
-      var element = draw.rect(100,100)
+    it('returns false if the node does not have the class', function () {
+      var element = draw.rect(100, 100)
       element.node.setAttribute('class', 'one')
       expect(element.hasClass('two')).toBeFalsy()
     })
   })
 
-  describe('addClass()', function() {
-    it('adds the class to the node', function() {
-      var element = draw.rect(100,100)
+  describe('addClass()', function () {
+    it('adds the class to the node', function () {
+      var element = draw.rect(100, 100)
       element.addClass('one')
       expect(element.hasClass('one')).toBeTruthy()
     })
 
-    it('does not add duplicate classes', function() {
-      var element = draw.rect(100,100)
+    it('does not add duplicate classes', function () {
+      var element = draw.rect(100, 100)
       element.addClass('one')
       element.addClass('one')
       expect(element.node.getAttribute('class')).toEqual('one')
     })
 
-    it('returns the svg instance', function() {
-      var element = draw.rect(100,100)
+    it('returns the svg instance', function () {
+      var element = draw.rect(100, 100)
       expect(element.addClass('one')).toEqual(element)
     })
   })
 
-  describe('removeClass()', function() {
-    it('removes the class from the node when the class exists', function() {
-      var element = draw.rect(100,100)
+  describe('removeClass()', function () {
+    it('removes the class from the node when the class exists', function () {
+      var element = draw.rect(100, 100)
       element.addClass('one')
       element.removeClass('one')
       expect(element.hasClass('one')).toBeFalsy()
     })
 
-    it('does nothing when the class does not exist', function() {
-      var element = draw.rect(100,100)
+    it('does nothing when the class does not exist', function () {
+      var element = draw.rect(100, 100)
       element.removeClass('one')
       expect(element.hasClass('one')).toBeFalsy()
     })
 
-    it('returns the element', function() {
-      var element = draw.rect(100,100)
+    it('returns the element', function () {
+      var element = draw.rect(100, 100)
       expect(element.removeClass('one')).toEqual(element)
     })
   })
 
-  describe('toggleClass()', function() {
-    it('adds the class when it does not already exist', function(){
-      var element = draw.rect(100,100)
+  describe('toggleClass()', function () {
+    it('adds the class when it does not already exist', function () {
+      var element = draw.rect(100, 100)
       element.toggleClass('one')
       expect(element.hasClass('one')).toBeTruthy()
     })
-    it('removes the class when it already exists', function(){
-      var element = draw.rect(100,100)
+    it('removes the class when it already exists', function () {
+      var element = draw.rect(100, 100)
       element.addClass('one')
       element.toggleClass('one')
       expect(element.hasClass('one')).toBeFalsy()
     })
-    it('returns the svg instance', function() {
-      var element = draw.rect(100,100)
+    it('returns the svg instance', function () {
+      var element = draw.rect(100, 100)
       expect(element.toggleClass('one')).toEqual(element)
     })
   })
 
-  describe('reference()', function() {
-    it('gets a referenced element from a given attribute', function() {
+  describe('reference()', function () {
+    it('gets a referenced element from a given attribute', function () {
       var rect = draw.defs().rect(100, 100)
-        , use  = draw.use(rect)
-        , mark = draw.marker(10, 10)
-        , path = draw.path(svgPath).marker('end', mark)
+      var use = draw.use(rect)
+      var mark = draw.marker(10, 10)
+      var path = draw.path(svgPath).marker('end', mark)
 
       expect(use.reference('href')).toBe(rect)
       expect(path.reference('marker-end')).toBe(mark)
     })
   })
 
-  describe('svg()', function() {
-    describe('without an argument', function() {
-      it('returns full raw svg when called on the root svg', function() {
-        draw.size(100,100).rect(100,100).id(null)
+  describe('svg()', function () {
+    describe('without an argument', function () {
+      it('returns full raw svg when called on the root svg', function () {
+        draw.size(100, 100).rect(100, 100).id(null)
         draw.circle(100).fill('#f06').id(null)
 
         var toBeTested = draw.svg()
 
         // Test for different browsers namely Firefox and Chrome
         expect(
-            // IE
-            toBeTested === '<svg xmlns:svgjs="http://svgjs.com/svgjs" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" xmlns="http://www.w3.org/2000/svg" height="100" width="100"><rect height="100" width="100"></rect><circle fill="#ff0066" cy="50" cx="50" r="50"></circle></svg>'
+          // IE
+          toBeTested === '<svg xmlns:svgjs="http://svgjs.com/svgjs" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" xmlns="http://www.w3.org/2000/svg" height="100" width="100"><rect height="100" width="100"></rect><circle fill="#ff0066" cy="50" cx="50" r="50"></circle></svg>'
 
-            // Firefox
+          // Firefox
          || toBeTested === '<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.com/svgjs" width="100" height="100"><rect width="100" height="100"></rect><circle r="50" cx="50" cy="50" fill="#ff0066"></circle></svg>'
 
-            // svgdom
+          // svgdom
          || toBeTested === '<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.com/svgjs" width="100" height="100"><svg id="SvgjsSvg1002" width="2" height="0" style="overflow: hidden; top: -100%; left: -100%; position: absolute; opacity: 0"><polyline id="SvgjsPolyline1003" points="10,10 20,10 30,10"></polyline><path id="SvgjsPath1004" d="M80 80A45 45 0 0 0 125 125L125 80Z "></path></svg><rect width="100" height="100"></rect><circle r="50" cx="50" cy="50" fill="#ff0066"></circle></svg>'
         ).toBeTruthy()
 
       })
-      it('returns partial raw svg when called on a sub group', function() {
+      it('returns partial raw svg when called on a sub group', function () {
         var group = draw.group().id(null)
-        group.rect(100,100).id(null)
+        group.rect(100, 100).id(null)
         group.circle(100).fill('#f06').id(null)
 
         var toBeTested = group.svg()
 
         expect(
-            toBeTested === '<g><rect width="100" height="100"></rect><circle r="50" cx="50" cy="50" fill="#ff0066"></circle></g>'
+          toBeTested === '<g><rect width="100" height="100"></rect><circle r="50" cx="50" cy="50" fill="#ff0066"></circle></g>'
          || toBeTested === '<g><rect height="100" width="100"></rect><circle fill="#ff0066" cy="50" cx="50" r="50"></circle></g>'
          || toBeTested === '<g xmlns="http://www.w3.org/2000/svg"><rect width="100" height="100"></rect><circle r="50" cx="50" cy="50" fill="#ff0066"></circle></g>'
         ).toBeTruthy()
       })
-      it('returns a single element when called on an element', function() {
+      it('returns a single element when called on an element', function () {
         var group = draw.group().id(null)
-        group.rect(100,100).id(null)
+        group.rect(100, 100).id(null)
         var circle = group.circle(100).fill('#f06').id(null)
         var toBeTested = circle.svg()
 
         expect(
-            toBeTested === '<circle r="50" cx="50" cy="50" fill="#ff0066"></circle>'
+          toBeTested === '<circle r="50" cx="50" cy="50" fill="#ff0066"></circle>'
          || toBeTested === '<circle fill="#ff0066" cy="50" cx="50" r="50"></circle>'
          || toBeTested === '<circle xmlns="http://www.w3.org/2000/svg" r="50" cx="50" cy="50" fill="#ff0066"></circle>'
-       ).toBeTruthy()
+        ).toBeTruthy()
       })
     })
-    describe('with raw svg given', function() {
-      it('imports a full svg document', function() {
+    describe('with raw svg given', function () {
+      it('imports a full svg document', function () {
         draw.svg('<svg id="SvgjsSvg1000" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="100" height="100" viewBox="0 0 50 50"><rect id="SvgjsRect1183" width="100" height="100"></rect><circle id="SvgjsCircle1184" r="50" cx="25" cy="25" fill="#ff0066"></circle></svg>')
 
-        expect(draw.get(0+parserInDoc).type).toBe('svg')
-        expect(draw.get(0+parserInDoc).children().length).toBe(2)
-        expect(draw.get(0+parserInDoc).get(0).type).toBe('rect')
-        expect(draw.get(0+parserInDoc).get(1).type).toBe('circle')
-        expect(draw.get(0+parserInDoc).get(1).attr('fill')).toBe('#ff0066')
+        expect(draw.get(0 + parserInDoc).type).toBe('svg')
+        expect(draw.get(0 + parserInDoc).children().length).toBe(2)
+        expect(draw.get(0 + parserInDoc).get(0).type).toBe('rect')
+        expect(draw.get(0 + parserInDoc).get(1).type).toBe('circle')
+        expect(draw.get(0 + parserInDoc).get(1).attr('fill')).toBe('#ff0066')
       })
-      it('imports partial svg content', function() {
+      it('imports partial svg content', function () {
         draw.svg('<g id="SvgjsG1185"><rect id="SvgjsRect1186" width="100" height="100"></rect><circle id="SvgjsCircle1187" r="50" cx="25" cy="25" fill="#ff0066"></circle></g>')
-        expect(draw.get(0+parserInDoc).type).toBe('g')
-        expect(draw.get(0+parserInDoc).get(0).type).toBe('rect')
-        expect(draw.get(0+parserInDoc).get(1).type).toBe('circle')
-        expect(draw.get(0+parserInDoc).get(1).attr('fill')).toBe('#ff0066')
+        expect(draw.get(0 + parserInDoc).type).toBe('g')
+        expect(draw.get(0 + parserInDoc).get(0).type).toBe('rect')
+        expect(draw.get(0 + parserInDoc).get(1).type).toBe('circle')
+        expect(draw.get(0 + parserInDoc).get(1).attr('fill')).toBe('#ff0066')
       })
     })
-    describe('with a modifier function', function() {
+    describe('with a modifier function', function () {
       var rect, circle, group
-      beforeEach(function() {
-        rect   = draw.rect(10, 10)
+      beforeEach(function () {
+        rect = draw.rect(10, 10)
         circle = draw.circle(20, 20)
-        group  = draw.group()
+        group = draw.group()
 
         group.add(rect)
         group.add(circle)
       })
 
-      it('executes the modifier', function() {
-        var result = group.svg(function(instance) {
+      it('executes the modifier', function () {
+        var result = group.svg(function (instance) {
           instance.addClass('test')
         })
 
@@ -905,8 +912,8 @@ describe('Element', function() {
         ).toBeTruthy()
       })
 
-      it("execute the modifier to replace the node", function() {
-        var result = group.svg(function(instance) {
+      it('execute the modifier to replace the node', function () {
+        var result = group.svg(function (instance) {
           if (instance instanceof SVG.Circle) {
             return draw.rect(15, 15)
           }
@@ -919,8 +926,8 @@ describe('Element', function() {
         ).toBeTruthy()
       })
 
-      it("it deletes the node if the modifier returns false", function() {
-        var result = group.svg(function(instance) {
+      it('it deletes the node if the modifier returns false', function () {
+        var result = group.svg(function (instance) {
           if (instance instanceof SVG.Circle) {
             return false
           }
@@ -935,9 +942,9 @@ describe('Element', function() {
     })
   })
 
-  describe('writeDataToDom()', function() {
-    it('set all properties in el.dom to the svgjs:data attribute', function(){
-      var rect = draw.rect(100,100)
+  describe('writeDataToDom()', function () {
+    it('set all properties in el.dom to the svgjs:data attribute', function () {
+      var rect = draw.rect(100, 100)
       rect.dom.foo = 'bar'
       rect.dom.number = new SVG.Number('3px')
 
@@ -945,9 +952,9 @@ describe('Element', function() {
 
       expect(rect.attr('svgjs:data')).toBe('{"foo":"bar","number":"3px"}')
     })
-    it('recursively dumps the data', function() {
+    it('recursively dumps the data', function () {
       var g = draw.group()
-      rect = g.rect(100,100)
+      rect = g.rect(100, 100)
       g.dom.foo = 'bar'
       rect.dom.number = new SVG.Number('3px')
 
@@ -958,9 +965,9 @@ describe('Element', function() {
     })
   })
 
-  describe('setData()', function() {
-    it('read all data from the svgjs:data attribute and assign it to el.dom', function(){
-      var rect = draw.rect(100,100)
+  describe('setData()', function () {
+    it('read all data from the svgjs:data attribute and assign it to el.dom', function () {
+      var rect = draw.rect(100, 100)
 
       rect.attr('svgjs:data', '{"foo":"bar","number":"3px"}')
       rect.setData(JSON.parse(rect.attr('svgjs:data')))
@@ -970,43 +977,43 @@ describe('Element', function() {
     })
   })
 
-  describe('point()', function() {
-    it('creates a point from screen coordinates transformed in the elements space', function(){
-      var rect = draw.rect(100,100)
+  describe('point()', function () {
+    it('creates a point from screen coordinates transformed in the elements space', function () {
+      var rect = draw.rect(100, 100)
 
       var m = draw.node.getScreenCTM()
       // alert([m.a, m.a, m.c, m.d, m.e, m.f].join(', '))
 
-      var translation = {x: m.e, y: m.f}
-      var pos = {x: 2, y:5}
+      var translation = { x: m.e, y: m.f }
+      var pos = { x: 2, y: 5 }
 
       expect(rect.point(pos.x, pos.y).x).toBeCloseTo(pos.x - translation.x)
       expect(rect.point(pos.x, pos.y).y).toBeCloseTo(pos.y - translation.y)
     })
   })
 
-  describe('inside()', function() {
-    it('checks whether the given point inside the bounding box of the element', function() {
-      var rect = draw.rect(100,100)
-      expect(rect.inside(50,50)).toBeTruthy()
-      expect(rect.inside(150,150)).toBeFalsy()
+  describe('inside()', function () {
+    it('checks whether the given point inside the bounding box of the element', function () {
+      var rect = draw.rect(100, 100)
+      expect(rect.inside(50, 50)).toBeTruthy()
+      expect(rect.inside(150, 150)).toBeFalsy()
     })
   })
-  describe('show()', function() {
-    it('sets display property to ""', function() {
-      var rect = draw.rect(100,100).show()
+  describe('show()', function () {
+    it('sets display property to ""', function () {
+      var rect = draw.rect(100, 100).show()
       expect(rect.css('display')).toBe('')
     })
   })
-  describe('hide()', function() {
-    it('sets display property to none', function() {
-      var rect = draw.rect(100,100).hide()
+  describe('hide()', function () {
+    it('sets display property to none', function () {
+      var rect = draw.rect(100, 100).hide()
       expect(rect.css('display')).toBe('none')
     })
   })
-  describe('visible()', function() {
-    it('checks if element is hidden or not', function() {
-      var rect = draw.rect(100,100).hide()
+  describe('visible()', function () {
+    it('checks if element is hidden or not', function () {
+      var rect = draw.rect(100, 100).hide()
       expect(rect.visible()).toBeFalsy()
       rect.show()
       expect(rect.visible()).toBeTruthy()
@@ -1020,8 +1027,8 @@ describe('Element', function() {
   //     expect(rect.is(SVG.Parent)).toBeFalsy()
   //   })
   // })
-  describe('defs()', function() {
-    it('returns the defs from the svg', function() {
+  describe('defs()', function () {
+    it('returns the defs from the svg', function () {
       var g = draw.group()
       expect(g.defs()).toBe(draw.root().defs())
       expect(g.defs() instanceof SVG.Defs).toBeTruthy()
@@ -1039,44 +1046,44 @@ describe('Element', function() {
     it('round specified attributes of a node to a specific precision', function () {
       var rect = draw.rect(100.123456, 200.987654)
 
-      expect(rect.round(2, ['width']).attr()).toEqual(jasmine.objectContaining({
+      expect(rect.round(2, [ 'width' ]).attr()).toEqual(jasmine.objectContaining({
         width: 100.12,
         height: 200.987654
       }))
     })
   })
 
-  describe('words()', function() {
-    it('inserts plain text in a node', function() {
+  describe('words()', function () {
+    it('inserts plain text in a node', function () {
       var element = draw.element('title').words('These are some words.').id(null)
       var result = element.svg()
       expect(
-           result == '<title>These are some words.</title>'
+        result == '<title>These are some words.</title>'
         || result == '<title xmlns="http://www.w3.org/2000/svg">These are some words.</title>'
       ).toBe(true)
     })
-    it('removes all nodes before adding words', function() {
+    it('removes all nodes before adding words', function () {
       var element = draw.element('title').words('These are some words.').id(null)
       element.words('These are some words.')
       var result = element.svg()
       expect(
-           result == '<title>These are some words.</title>'
+        result == '<title>These are some words.</title>'
         || result == '<title xmlns="http://www.w3.org/2000/svg">These are some words.</title>'
       ).toBe(true)
     })
   })
 
-  describe('element()', function() {
+  describe('element()', function () {
     var element
 
-    beforeEach(function() {
+    beforeEach(function () {
       element = draw.element('rect')
     })
 
-    it('creates an instance of Dom', function() {
+    it('creates an instance of Dom', function () {
       expect(element instanceof SVG.Dom).toBeTruthy()
     })
-    it('creates element in called parent', function() {
+    it('creates element in called parent', function () {
       expect(element.parent()).toBe(draw)
     })
   })
diff --git a/spec/spec/elements/A.js b/spec/spec/elements/A.js
new file mode 100644
index 0000000..4c0c3bf
--- /dev/null
+++ b/spec/spec/elements/A.js
@@ -0,0 +1,120 @@
+/* globals describe, expect, it, jasmine */
+
+import { A, G, Rect } from '../../../src/main.js'
+
+const { any } = jasmine
+
+const url = 'https://svgjs.com'
+describe('A.js', () => {
+
+  describe('()', () => {
+    it('creates a new object of type A', () => {
+      expect(new A()).toEqual(any(A))
+    })
+
+    it('sets passed attributes on the element', () => {
+      expect(new A({ id: 'foo' }).id()).toBe('foo')
+    })
+  })
+
+  describe('to()', () => {
+    it('creates xlink:href attribute', () => {
+      const link = new A()
+      link.to(url)
+      expect(link.attr('href')).toBe(url)
+    })
+  })
+
+  describe('target()', () => {
+    it('creates target attribute', () => {
+      const link = new A()
+      link.target('_blank')
+      expect(link.attr('target')).toBe('_blank')
+    })
+  })
+
+  describe('Container', () => {
+    describe('link()', () => {
+      it('creates a link with given url', () => {
+        const group = new G()
+        const link = group.link(url)
+        expect(link.attr('href')).toBe(url)
+        expect(link).toEqual(any(A))
+      })
+    })
+  })
+
+  describe('Element', () => {
+    describe('linker()', () => {
+      it('returns the instance of the link of a linked element', () => {
+        const link = new A().to(url)
+        const rect = link.rect(100, 100)
+
+        expect(rect.linker()).toBe(link)
+      })
+
+      it('returns null if no link is found', () => {
+        const group = new G()
+        const rect = group.rect(100, 100)
+
+        expect(rect.linker()).toBe(null)
+      })
+
+      it('returns null when el is not in dom at all', () => {
+        const group = new G()
+        expect(group.linker()).toBe(null)
+      })
+    })
+
+    describe('unlink()', () => {
+      it('returns itself', () => {
+        const group = new G()
+        expect(group.unlink()).toBe(group)
+      })
+
+      it('removes the link', () => {
+        const group = new G()
+        const link = group.link(url)
+        const rect = link.rect(100, 100)
+
+        expect(rect.unlink().parent()).toBe(group)
+        expect(link.parent()).toBe(null)
+      })
+
+      it('removes also the link when link wasn\'t in document', () => {
+        const link = new A().to(url)
+        const rect = link.rect(100, 100)
+
+        expect(rect.unlink().parent()).toBe(null)
+        expect(link.parent()).toBe(null)
+      })
+    })
+
+    describe('linkTo()', () => {
+      it('wraps the called element in a link with given url', () => {
+        const rect = new Rect()
+        rect.linkTo(url)
+        expect(rect.linker()).toEqual(any(A))
+        expect(rect.linker().attr('href')).toBe(url)
+      })
+
+      it('wraps the called element in a link with given block', () => {
+        const rect = new Rect()
+        rect.linkTo(function (link) {
+          link.to(url).target('_blank')
+        })
+        expect(rect.linker().attr('href')).toBe(url)
+        expect(rect.linker().attr('target')).toBe('_blank')
+      })
+
+      it('reuses existing link if possible', () => {
+        const rect = new Rect()
+        rect.linkTo(url)
+        const link = rect.linker()
+        rect.linkTo(url + '/something')
+        expect(rect.linker()).toBe(link)
+      })
+    })
+  })
+
+})
diff --git a/spec/spec/elements/Dom.js b/spec/spec/elements/Dom.js
new file mode 100644
index 0000000..138a391
--- /dev/null
+++ b/spec/spec/elements/Dom.js
@@ -0,0 +1,40 @@
+/* globals describe, expect, it, beforeEach */
+
+import { SVG, G, Rect } from '../../../src/main.js'
+
+describe('Dom.js', function () {
+  describe('wrap()', function () {
+    var canvas
+    var rect
+
+    beforeEach(function () {
+      canvas = new SVG()
+      rect = canvas.rect(100, 100)
+    })
+
+    it('returns the current element', function () {
+      expect(rect.wrap(new G())).toBe(rect)
+    })
+
+    it('wraps the passed element around the current element', function () {
+      var g = new G()
+      expect(rect.wrap(g).parent()).toBe(g)
+      expect(g.parent()).toBe(canvas)
+    })
+
+    it('wraps also when element is not in the dom', () => {
+      var g = new G()
+      var rect = new Rect()
+      expect(rect.wrap(g).parent()).toBe(g)
+      expect(g.parent()).toBe(null)
+    })
+
+    it('inserts at the correct position', () => {
+      canvas.rect(100, 100)
+      rect = canvas.rect(100, 100)
+      var position = rect.position()
+      var g = new G()
+      expect(rect.wrap(g).parent().position()).toBe(position)
+    })
+  })
+})
diff --git a/spec/spec/elements/ForeignObject.js b/spec/spec/elements/ForeignObject.js
index 56ab081..14e9e00 100644
--- a/spec/spec/elements/ForeignObject.js
+++ b/spec/spec/elements/ForeignObject.js
@@ -1,7 +1,8 @@
-import { makeInstance, ForeignObject } from '../../../src/main.js';
+/* globals describe, expect, it, jasmine */
 
-const { any, createSpy, objectContaining } = jasmine
+import { makeInstance, ForeignObject } from '../../../src/main.js'
 
+const { any } = jasmine
 
 describe('ForeignObject.js', () => {
 
@@ -11,7 +12,7 @@ describe('ForeignObject.js', () => {
     })
 
     it('sets passed attributes on the element', () => {
-      expect(new ForeignObject({id:'foo'}).id()).toBe('foo')
+      expect(new ForeignObject({ id: 'foo' }).id()).toBe('foo')
     })
   })
 
diff --git a/spec/spec/elements/G.js b/spec/spec/elements/G.js
index 0d8952e..7e2fab1 100644
--- a/spec/spec/elements/G.js
+++ b/spec/spec/elements/G.js
@@ -1,7 +1,8 @@
-import { Box, G, Rect, makeInstance } from '../../../src/main.js';
+/* globals describe, expect, it, jasmine, spyOn */
 
-const { any, createSpy, objectContaining } = jasmine
+import { Box, G, Rect, makeInstance } from '../../../src/main.js'
 
+const { any, objectContaining } = jasmine
 
 describe('G.js', () => {
 
@@ -11,7 +12,7 @@ describe('G.js', () => {
     })
 
     it('sets passed attributes on the element', () => {
-      expect(new G({id:'foo'}).id()).toBe('foo')
+      expect(new G({ id: 'foo' }).id()).toBe('foo')
     })
   })
 
@@ -31,8 +32,8 @@ describe('G.js', () => {
       const canvas = makeInstance().addTo('#canvas')
       const g = canvas.group()
 
-      g.add(new Rect({width:100, height:120, x:10, y:20}))
-      g.add(new Rect({width:70, height:100, x:50, y:60}))
+      g.add(new Rect({ width: 100, height: 120, x: 10, y: 20 }))
+      g.add(new Rect({ width: 70, height: 100, x: 50, y: 60 }))
 
       g.dmove(10, 10)
 
@@ -82,8 +83,8 @@ describe('G.js', () => {
       const canvas = makeInstance().addTo('#canvas')
 
       const g = new G()
-      g.add(new Rect({width:100, height:120, x:10, y:20}))
-      g.add(new Rect({width:70, height:100, x:50, y:60}))
+      g.add(new Rect({ width: 100, height: 120, x: 10, y: 20 }))
+      g.add(new Rect({ width: 70, height: 100, x: 50, y: 60 }))
 
       g.addTo(canvas)
 
@@ -107,8 +108,8 @@ describe('G.js', () => {
       const canvas = makeInstance().addTo('#canvas')
 
       const g = new G()
-      g.add(new Rect({width:100, height:120, x:10, y:20}))
-      g.add(new Rect({width:70, height:100, x:50, y:60}))
+      g.add(new Rect({ width: 100, height: 120, x: 10, y: 20 }))
+      g.add(new Rect({ width: 70, height: 100, x: 50, y: 60 }))
 
       g.addTo(canvas)
 
@@ -132,8 +133,8 @@ describe('G.js', () => {
       const canvas = makeInstance().addTo('#canvas')
 
       const g = new G()
-      g.add(new Rect({width:100, height:120, x:10, y:20}))
-      g.add(new Rect({width:70, height:100, x:50, y:60}))
+      g.add(new Rect({ width: 100, height: 120, x: 10, y: 20 }))
+      g.add(new Rect({ width: 70, height: 100, x: 50, y: 60 }))
 
       g.addTo(canvas)
 
@@ -152,7 +153,7 @@ describe('G.js', () => {
       const rbox2 = g.children()[1].rbox()
 
       expect(rbox1.width).toBeCloseTo(90.9, 1)
-      expect(rbox2.width).toBeCloseTo(63.6, 1)
+      expect(Math.floor(rbox2.width * 10) / 10).toBeCloseTo(63.6, 1) // Browsers have different opinion on this one (chrome: 63.6, ff: 63.7)
 
       expect(rbox1.x).toBeCloseTo(10, 1)
       expect(rbox2.x).toBeCloseTo(46.4, 1)
@@ -183,7 +184,6 @@ describe('G.js', () => {
       expect(newBox.h).toBeCloseTo(100, 4)
     })
 
-
   })
 
   describe('width()', () => {
@@ -191,8 +191,8 @@ describe('G.js', () => {
       const canvas = makeInstance().addTo('#canvas')
 
       const g = new G()
-      g.add(new Rect({width:100, height:120, x:10, y:20}))
-      g.add(new Rect({width:70, height:100, x:50, y:60}))
+      g.add(new Rect({ width: 100, height: 120, x: 10, y: 20 }))
+      g.add(new Rect({ width: 70, height: 100, x: 50, y: 60 }))
 
       g.addTo(canvas)
 
@@ -203,8 +203,8 @@ describe('G.js', () => {
       const canvas = makeInstance().addTo('#canvas')
 
       const g = new G()
-      g.add(new Rect({width:100, height:120, x:10, y:20}))
-      g.add(new Rect({width:70, height:100, x:50, y:60}))
+      g.add(new Rect({ width: 100, height: 120, x: 10, y: 20 }))
+      g.add(new Rect({ width: 70, height: 100, x: 50, y: 60 }))
 
       g.addTo(canvas)
 
@@ -215,7 +215,7 @@ describe('G.js', () => {
       const rbox2 = g.children()[1].rbox()
 
       expect(rbox1.width).toBeCloseTo(90.9, 1)
-      expect(rbox2.width).toBeCloseTo(63.6, 1)
+      expect(Math.floor(rbox2.width * 10) / 10).toBeCloseTo(63.6, 1) // Browsers have different opinion on this one (chrome: 63.6, ff: 63.7)
 
       expect(rbox1.x).toBeCloseTo(10, 3)
       expect(rbox2.x).toBeCloseTo(46.4, 1)
@@ -227,8 +227,8 @@ describe('G.js', () => {
       const canvas = makeInstance().addTo('#canvas')
 
       const g = new G()
-      g.add(new Rect({width:100, height:120, x:10, y:20}))
-      g.add(new Rect({width:70, height:100, x:50, y:60}))
+      g.add(new Rect({ width: 100, height: 120, x: 10, y: 20 }))
+      g.add(new Rect({ width: 70, height: 100, x: 50, y: 60 }))
 
       g.addTo(canvas)
 
@@ -239,8 +239,8 @@ describe('G.js', () => {
       const canvas = makeInstance().addTo('#canvas')
 
       const g = new G()
-      g.add(new Rect({width:100, height:120, x:10, y:20}))
-      g.add(new Rect({width:70, height:100, x:50, y:60}))
+      g.add(new Rect({ width: 100, height: 120, x: 10, y: 20 }))
+      g.add(new Rect({ width: 70, height: 100, x: 50, y: 60 }))
 
       g.addTo(canvas)
 
diff --git a/spec/spec/elements/Marker.js b/spec/spec/elements/Marker.js
new file mode 100644
index 0000000..67be0bd
--- /dev/null
+++ b/spec/spec/elements/Marker.js
@@ -0,0 +1,153 @@
+/* globals describe, expect, it, beforeEach, jasmine, container */
+
+import { Marker, SVG, Defs } from '../../../src/main.js'
+
+const { any } = jasmine
+
+describe('Marker.js', function () {
+
+  describe('()', () => {
+    it('creates a new object of type Marker', () => {
+      expect(new Marker()).toEqual(any(Marker))
+    })
+
+    it('sets passed attributes on the element', () => {
+      expect(new Marker({ id: 'foo' }).id()).toBe('foo')
+    })
+  })
+
+  describe('width()', () => {
+    it('sets the markerWidth attribute', () => {
+      const marker = new Marker().width(100)
+      expect(marker.attr('markerWidth')).toBe(100)
+    })
+  })
+
+  describe('height()', () => {
+    it('sets the markerHeight attribute', () => {
+      const marker = new Marker().height(100)
+      expect(marker.attr('markerHeight')).toBe(100)
+    })
+  })
+
+  describe('orient()', () => {
+    it('sets the orient attribute', () => {
+      const marker = new Marker().orient('start')
+      expect(marker.attr('orient')).toBe('start')
+    })
+  })
+
+  describe('ref()', () => {
+    it('sets refX and refY attriute', () => {
+      const marker = new Marker().ref(10, 20)
+      expect(marker.attr('refX')).toBe(10)
+      expect(marker.attr('refY')).toBe(20)
+    })
+  })
+
+  describe('update()', () => {
+    it('updates the marker', () => {
+      const marker = new Marker()
+      marker.rect(100, 100)
+      marker.update(function (m) {
+        m.rect(100, 100)
+        expect(this).toBe(marker)
+        expect(m).toBe(marker)
+      })
+      expect(marker.children().length).toBe(1)
+    })
+  })
+
+  describe('toString()', () => {
+    it('returns the url identifier for this marker', () => {
+      const marker = new Marker()
+      expect(marker.toString()).toBe('url(#' + marker.id() + ')')
+    })
+  })
+
+  describe('Container', () => {
+    var canvas
+    var group
+
+    beforeEach(() => {
+      canvas = SVG()
+      group = canvas.group()
+    })
+
+    describe('marker()', () => {
+      it('creates an instance of Marker', () => {
+        const marker = group.marker(10, 12)
+        expect(marker instanceof Marker).toBeTrue()
+      })
+
+      it('creates marker in defs', () => {
+        const marker = group.marker(10, 12)
+        expect(marker.parent() instanceof Defs).toBeTruthy()
+      })
+
+      it('sets the refX to half of the given width and height', () => {
+        const marker = group.marker(10, 12)
+        expect(marker.node.getAttribute('refX')).toBe('5')
+        expect(marker.node.getAttribute('refY')).toBe('6')
+      })
+    })
+  })
+
+  describe('Path', () => {
+    var path, marker, canvas
+
+    beforeEach(() => {
+      // because we use `reference` here we need to put it into the live dom
+      canvas = new SVG().addTo(container)
+      path = canvas.path('M 100 200 C 200 100 300  0 400 100 C 500 200 600 300 700 200 C 800 100 900 100 900 100')
+    })
+
+    it('creates an instance of Marker', () => {
+      path.marker('mid', 10, 12, function (add) {
+        add.rect(10, 12)
+
+        this.ref(5, 6)
+      })
+
+      expect(path.reference('marker-mid').children().length).toBe(1)
+      expect(path.reference('marker-mid').attr('refX')).toBe(5)
+      expect(path.reference('marker-mid') instanceof Marker).toBeTruthy()
+    })
+
+    describe('marker()', () => {
+      it('returns the target element', () => {
+        expect(path.marker('start', 10, 12)).toBe(path)
+      })
+
+      it('creates a marker and applies it to the marker-start attribute', () => {
+        path.marker('start', 10, 12)
+        marker = path.reference('marker-start')
+
+        expect(path.node.getAttribute('marker-start')).toBe(marker.toString())
+      })
+
+      it('creates a marker and applies it to the marker-mid attribute', () => {
+        path.marker('mid', 10, 12)
+        marker = path.reference('marker-mid')
+
+        expect(path.node.getAttribute('marker-mid')).toBe(marker.toString())
+      })
+
+      it('creates a marker and applies it to the marker-end attribute', () => {
+        path.marker('end', 10, 12)
+        marker = path.reference('marker-end')
+
+        expect(path.node.getAttribute('marker-end')).toBe(marker.toString())
+      })
+
+      it('accepts an instance of an existing marker element as the second argument', () => {
+        marker = new Marker().size(11, 11)
+        path.marker('mid', marker)
+
+        expect(path.node.getAttribute('marker-mid')).toBe(marker.toString())
+      })
+    })
+
+  })
+
+})
diff --git a/spec/spec/elements/Text.js b/spec/spec/elements/Text.js
new file mode 100644
index 0000000..ad47bbe
--- /dev/null
+++ b/spec/spec/elements/Text.js
@@ -0,0 +1,129 @@
+/* globals describe, expect, it, spyOn jasmine, container */
+
+import { Text, Number as SVGNumber, SVG, G } from '../../../src/main.js'
+
+const { any } = jasmine
+
+describe('Text.js', () => {
+  describe('()', () => {
+    it('creates a new object of type Text', () => {
+      expect(new Text()).toEqual(any(Text))
+    })
+
+    it('sets passed attributes on the element', () => {
+      expect(new Text({ id: 'foo' }).id()).toBe('foo')
+    })
+  })
+
+  describe('text()', () => {
+    it('sets the text content of the tspan and returns itself', () => {
+      const text = new Text()
+      expect(text.text('Hello World')).toBe(text)
+      expect(text.node.textContent).toBe('Hello World')
+    })
+
+    it('creates tspans for every line', () => {
+      const text = new Text().text('Hello World\nHow is it\ngoing')
+      expect(text.children().length).toBe(3)
+      expect(text.get(0).node.textContent).toBe('Hello World')
+      expect(text.get(1).node.textContent).toBe('How is it')
+      expect(text.get(2).node.textContent).toBe('going')
+    })
+
+    it('returns the correct text with newlines', () => {
+      const text = new Text().text('Hello World\nHow is it\ngoing')
+      expect(text.text()).toBe('Hello World\nHow is it\ngoing')
+    })
+
+    it('executes passed block', () => {
+      const text = new Text()
+      text.text(function (t) {
+        t.tspan('Hello World').newLine()
+        t.tspan('How is it').newLine()
+        t.tspan('going').newLine()
+        expect(this).toBe(text)
+        expect(t).toBe(text)
+      })
+      expect(text.text()).toBe('Hello World\nHow is it\ngoing')
+    })
+
+    it('triggers rebuild', () => {
+      const text = new Text()
+      const spy = spyOn(text, 'rebuild')
+      text.text('foo')
+      expect(spy).toHaveBeenCalled()
+    })
+  })
+
+  describe('leading()', () => {
+    it('returns the leading value of the text without an argument', () => {
+      const text = new Text()
+      expect(text.leading() instanceof SVGNumber)
+      expect(text.leading().valueOf()).toBe(1.3)
+    })
+
+    it('sets the leading value of the text with the first argument', () => {
+      const text = new Text()
+      expect(text.leading(1.5).dom.leading.valueOf()).toBe(1.5)
+    })
+  })
+
+  describe('rebuild()', () => {
+    it('disables the rebuild if called with false', () => {
+      const text = new Text()
+      expect(text.rebuild(false)._rebuild).toBeFalse()
+    })
+
+    it('enables the rebuild if called with true', () => {
+      const text = new Text()
+      expect(text.rebuild(true)._rebuild).toBeTrue()
+    })
+
+    it('rebuilds the text without an argument given', () => {
+      const canvas = SVG().addTo(container)
+      const text = new Text().addTo(canvas)
+      text.text((t) => {
+        t.tspan('Hello World').newLine()
+        t.tspan('How is it').newLine()
+        t.tspan('going').newLine()
+      })
+
+      const dy = text.get(1).dy()
+      text.leading(1.7)
+      expect(dy).not.toBe(text.get(1).dy())
+    })
+  })
+
+  describe('setData()', () => {
+    it('read all data from the svgjs:data attribute and assign it to el.dom', () => {
+      const text = new Text()
+      text.attr('svgjs:data', '{"foo":"bar","leading":"3px"}')
+      text.setData(JSON.parse(text.attr('svgjs:data')))
+
+      expect(text.dom.foo).toBe('bar')
+      expect(text.dom.leading instanceof SVGNumber).toBeTruthy()
+      expect(text.dom.leading.value).toBe(3)
+      expect(text.dom.leading.unit).toBe('px')
+    })
+  })
+
+  describe('Container', () => {
+    describe('text()', () => {
+      it('creates a text element with lines', () => {
+        const group = new G()
+        const text = group.text('Hello World\nHow is it\ngoing')
+        expect(text).toEqual(any(Text))
+        expect(text.text()).toBe('Hello World\nHow is it\ngoing')
+      })
+    })
+
+    describe('plain()', () => {
+      it('creates plain text', () => {
+        const group = new G()
+        const text = group.plain('A piece')
+        expect(text).toEqual(any(Text))
+        expect(text.node.childNodes[0].data).toBe('A piece')
+      })
+    })
+  })
+})
diff --git a/spec/spec/elements/TextPath.js b/spec/spec/elements/TextPath.js
new file mode 100644
index 0000000..213b867
--- /dev/null
+++ b/spec/spec/elements/TextPath.js
@@ -0,0 +1,136 @@
+/* globals describe, expect, it, beforeEach, jasmine, container */
+
+import { Text, SVG, TextPath, Path } from '../../../src/main.js'
+
+const { any } = jasmine
+
+describe('TextPath.js', () => {
+  var canvas, text, path
+  var txt = 'We go up, then we go down, then up again'
+  var data = 'M 100 200 C 200 100 300  0 400 100 C 500 200 600 300 700 200 C 800 100 900 100 900 100'
+
+  beforeEach(() => {
+    canvas = new SVG().addTo(container)
+    text = canvas.text(txt)
+    path = canvas.path(data)
+  })
+
+  describe('()', () => {
+    it('creates a new object of type TextPath', () => {
+      expect(new TextPath()).toEqual(any(TextPath))
+    })
+
+    it('sets passed attributes on the element', () => {
+      expect(new TextPath({ id: 'foo' }).id()).toBe('foo')
+    })
+  })
+
+  describe('track()', () => {
+    it('returns the referenced path instance', () => {
+      const textPath = text.path(path)
+      expect(textPath.track()).toBe(path)
+    })
+  })
+
+  describe('array()', () => {
+    it('returns the path array of the underlying path', () => {
+      expect(text.path(path).array()).toEqual(path.array())
+    })
+
+    it('returns null if there is no underlying path', () => {
+      const textPath = new TextPath()
+      expect(textPath.array()).toBe(null)
+    })
+  })
+
+  describe('plot()', () => {
+    it('changes the array of the underlying path', () => {
+      expect(text.path().plot(path.array()).array()).toEqual(path.array())
+    })
+
+    it('return the path array of the underlying path when no arguments is passed', () => {
+      const textPath = text.path(path)
+      expect(textPath.plot()).toBe(textPath.array())
+      expect(textPath.plot()).not.toBe(null)
+    })
+  })
+
+  describe('Container', () => {
+    describe('textPath()', () => {
+      it('creates a textPath from string text and string path', () => {
+        const textPath = canvas.textPath(txt, data)
+        expect(textPath).toEqual(any(TextPath))
+        expect(textPath.parent()).toEqual(any(Text))
+        expect(textPath.track()).toEqual(any(Path))
+        expect(textPath.track().parent()).toBe(canvas.defs())
+      })
+
+      it('creates a textPath from Text and Path', () => {
+        const textPath = canvas.textPath(text, path)
+        expect(textPath.parent()).toEqual(text)
+        expect(textPath.track()).toEqual(path)
+      })
+
+      it('passes the text into textPath and not text', () => {
+        const tspan = text.first()
+        const textPath = canvas.textPath(text, path)
+        expect(textPath.first()).toBe(tspan)
+        expect(text.first()).toBe(textPath)
+      })
+    })
+  })
+
+  describe('Text', () => {
+    describe('path()', () => {
+      it('returns an instance of TextPath', () => {
+        expect(text.path(data)).toEqual(any(TextPath))
+      })
+
+      it('creates a textPath node in the text element', () => {
+        text.path(data)
+        expect(text.node.querySelector('textPath')).not.toBe(null)
+      })
+
+      it('references the passed path', () => {
+        const textPath = text.path(path)
+        expect(textPath.reference('href')).toBe(path)
+      })
+    })
+
+    describe('textPath()', () => {
+      it('returns the textPath element of this text', () => {
+        const textPath = text.path(path)
+        expect(text.textPath()).toBe(textPath)
+      })
+    })
+  })
+
+  describe('Path', () => {
+    describe('text()', () => {
+      it('returns an instance of TextPath', () => {
+        expect(path.text(txt)).toEqual(any(TextPath))
+      })
+
+      it('creates a text with textPath node and inserts it after the path', () => {
+        var textPath = path.text(txt)
+        expect(textPath.parent()).toEqual(any(Text))
+        expect(SVG(path.node.nextSibling)).toBe(textPath.parent())
+      })
+
+      it('transplants the node from text to textPath', () => {
+        const nodesInText = [].slice.call(text.node.childNodes)
+        var textPath = path.text(text)
+        const nodesInTextPath = [].slice.call(textPath.node.childNodes)
+        expect(nodesInText).toEqual(nodesInTextPath)
+      })
+    })
+
+    describe('targets', () => {
+      it('returns all elements referencing this path with href', () => {
+        const textPath = text.path(path)
+        expect(path.targets()).toEqual([ textPath ])
+      })
+    })
+  })
+
+})
diff --git a/spec/spec/elements/Tspan.js b/spec/spec/elements/Tspan.js
new file mode 100644
index 0000000..5d2c0d5
--- /dev/null
+++ b/spec/spec/elements/Tspan.js
@@ -0,0 +1,137 @@
+/* globals describe, expect, it, jasmine, container */
+
+import { Tspan, Text, Number as SVGNumber, SVG } from '../../../src/main.js'
+import { getWindow } from '../../../src/utils/window.js'
+
+const { any } = jasmine
+
+describe('Tspan.js', () => {
+  describe('()', () => {
+    it('creates a new object of type Tspan', () => {
+      expect(new Tspan()).toEqual(any(Tspan))
+    })
+
+    it('sets passed attributes on the element', () => {
+      expect(new Tspan({ id: 'foo' }).id()).toBe('foo')
+    })
+  })
+
+  describe('text()', () => {
+    it('sets the text content of the tspan and returns itself', () => {
+      const tspan = new Tspan()
+      expect(tspan.text('Hello World')).toBe(tspan)
+      expect(tspan.node.textContent).toBe('Hello World')
+    })
+
+    it('returns the textContent of the tspan', () => {
+      const tspan = new Tspan().text('Hello World')
+      expect(tspan.text()).toBe('Hello World')
+    })
+
+    it('adds a newline when this tspan is a newline', () => {
+      const tspan = new Tspan().text('Hello World').newLine()
+      expect(tspan.text()).toBe('Hello World\n')
+    })
+
+    it('executes a function in the context of the tspan', () => {
+      const tspan = new Tspan()
+      tspan.text(function (t) {
+        expect(this).toBe(tspan)
+        expect(t).toBe(tspan)
+      })
+    })
+  })
+
+  describe('dx()', () => {
+    it('sets the dx attribute and returns itself', () => {
+      const tspan = new Tspan()
+      expect(tspan.dx(20)).toBe(tspan)
+      expect(tspan.attr('dx')).toBe(20)
+    })
+
+    it('returns the dx attribute', () => {
+      const tspan = new Tspan().dx(20)
+      expect(tspan.dx()).toBe(20)
+    })
+  })
+
+  describe('dy()', () => {
+    it('sets the dy attribute and returns itself', () => {
+      const tspan = new Tspan()
+      expect(tspan.dy(20)).toBe(tspan)
+      expect(tspan.attr('dy')).toBe(20)
+    })
+
+    it('returns the dy attribute', () => {
+      const tspan = new Tspan().dy(20)
+      expect(tspan.dy()).toBe(20)
+    })
+  })
+
+  describe('newLine', () => {
+    it('works without text parent', () => {
+      // should not fail
+      const tspan = new Tspan().newLine()
+      expect(tspan.dom.newLined).toBeTrue()
+    })
+
+    it('returns itself', () => {
+      const tspan = new Tspan()
+      expect(tspan.newLine()).toBe(tspan)
+    })
+
+    it('marks the tspan as a newline', () => {
+      const tspan = new Tspan().wrap(new Text()).newLine()
+      expect(tspan.dom.newLined).toBeTrue()
+    })
+
+    it('sets dy to zero of first line', () => {
+      const text = new Text()
+      const first = text.tspan('First Line').newLine()
+      expect(first.dy()).toBe(0)
+    })
+
+    it('sets dy corresponding to line and leading', () => {
+      const canvas = SVG().addTo(container)
+      const text = new Text().leading(2).build(true).addTo(canvas)
+      text.tspan('First Line').newLine()
+      text.tspan('Second Line').newLine()
+      const third = text.tspan('Third Line').newLine()
+
+      const fontSize = getWindow().window.getComputedStyle(third.node).getPropertyValue('font-size')
+      const dy = 2 * new SVGNumber(fontSize)
+      expect(third.dy()).toBe(dy)
+    })
+
+  })
+
+  describe('Tspan', () => {
+    describe('tspan()', () => {
+      it('creates a tspan in a text', () => {
+        const text = new Text()
+        const tspan = text.tspan()
+        expect(tspan).toEqual(any(Tspan))
+        expect(tspan.parent()).toBe(text)
+      })
+
+      it('creates a tspan in a tspan', () => {
+        const tspan1 = new Tspan()
+        const tspan2 = tspan1.tspan()
+        expect(tspan2).toEqual(any(Tspan))
+        expect(tspan2.parent()).toBe(tspan1)
+      })
+    })
+  })
+
+  describe('Text', () => {
+    describe('newLine()', () => {
+      it('creates a tspan and calles newLine() on it', () => {
+        const text = new Text()
+        const tspan = text.newLine()
+        expect(tspan).toEqual(any(Tspan))
+        expect(tspan.parent()).toBe(text)
+        expect(tspan.dom.newLined).toBeTrue()
+      })
+    })
+  })
+})
diff --git a/spec/spec/hyperlink.js b/spec/spec/hyperlink.js
deleted file mode 100644
index 6dfce10..0000000
--- a/spec/spec/hyperlink.js
+++ /dev/null
@@ -1,54 +0,0 @@
-describe('Hyperlink', function() {
-  var link
-    , url = 'http://svgjs.com'
-
-  beforeEach(function() {
-    link = draw.link(url)
-    link.rect(100,100)
-  })
-  
-  afterEach(function() {
-    draw.clear()
-  })
-
-  it('creates a link', function() {
-    expect(link.attr('href')).toBe(url)
-  })
-
-  describe('to()', function() {
-    it('creates xlink:href attribute', function() {
-      link.to('http://apple.com')
-      expect(link.attr('href')).toBe('http://apple.com')
-    })
-  })
-
-  describe('target()', function() {
-    it('creates target attribute', function() {
-      link.target('_blank')
-      expect(link.attr('target')).toBe('_blank')
-    })
-  })
-
-  describe('SVG.Element', function() {
-    var element
-
-    beforeEach(function() {
-      element = draw.rect(100,100)
-    })
-
-    describe('linkTo()', function() {
-      it('wraps the called element in a link with given url', function() {
-        element.linkTo(url)
-        expect(element.parent().attr('href')).toBe(url)
-      })
-      it('wraps the called element in a link with given block', function() {
-        element.linkTo(function(link) {
-          link.to(url).target('_blank')
-        })
-        expect(element.parent().attr('href')).toBe(url)
-        expect(element.parent().attr('target')).toBe('_blank')
-      })
-    })
-  })
-
-})
\ No newline at end of file
diff --git a/spec/spec/marker.js b/spec/spec/marker.js
deleted file mode 100644
index 7b902d4..0000000
--- a/spec/spec/marker.js
+++ /dev/null
@@ -1,89 +0,0 @@
-describe('Marker', function() {
-  
-  describe('on a container element', function() {
-    var marker
-
-    beforeEach(function() {
-      marker = draw.marker(10, 12, function(add) {
-        add.rect(10, 12)
-
-        this.ref(5, 6)
-      })
-    })
-
-    it('creates an instance of SVG.Marker', function() {
-      expect(marker instanceof SVG.Marker).toBeTruthy()
-    })
-
-    it('creates marker in defs', function() {
-      expect(marker.parent() instanceof SVG.Defs).toBeTruthy()
-    })
-
-    describe('marker()', function() {
-      it('returns the marker element', function() {
-        expect(marker = draw.marker(10, 12)).toBe(marker)
-      })
-      it('sets the refX to half of the given width', function() {
-        marker = draw.marker(10, 12)
-        expect(marker.node.getAttribute('refX')).toBe('5')
-      })
-      it('sets the refY to half of the given height', function() {
-        marker = draw.marker(13, 15)
-        expect(marker.node.getAttribute('refY')).toBe('7.5')
-      })
-    })
-
-  })
-  
-  describe('on a target path', function() {
-    var path, marker
-
-    beforeEach(function() {
-      path = draw.path('M 100 200 C 200 100 300  0 400 100 C 500 200 600 300 700 200 C 800 100 900 100 900 100')
-
-      path.marker('mid', 10, 12, function(add) {
-        add.rect(10, 12)
-
-        this.ref(5, 6)
-      })
-
-      marker = path.marker('mid', 10, 10)
-    })
-
-    it('creates an instance of SVG.Marker', function() {
-      expect(path.reference('marker-mid') instanceof SVG.Marker).toBeTruthy()
-    })
-
-    describe('marker()', function() {
-      it('returns the target element', function() {
-        expect(path.marker('start', 10, 12)).toBe(path)
-      })
-      it('creates a marker and applies it to the marker-start attribute', function() {
-        path.marker('start', 10, 12)
-        marker = path.reference('marker-start')
-
-        expect(path.node.getAttribute('marker-start')).toBe(marker.toString())
-      })
-      it('creates a marker and applies it to the marker-mid attribute', function() {
-        path.marker('mid', 10, 12)
-        marker = path.reference('marker-mid')
-
-        expect(path.node.getAttribute('marker-mid')).toBe(marker.toString())
-      })
-      it('creates a marker and applies it to the marker-end attribute', function() {
-        path.marker('end', 10, 12)
-        marker = path.reference('marker-end')
-
-        expect(path.node.getAttribute('marker-end')).toBe(marker.toString())
-      })
-      it('accepts an instance of an existing marker element as the second argument', function() {
-        marker = draw.marker(11, 11)
-        path.marker('mid', marker)
-
-        expect(path.node.getAttribute('marker-mid')).toBe(marker.toString())
-      })
-    })
-  })
-
-
-})
\ No newline at end of file
diff --git a/spec/spec/modules/core/event.js b/spec/spec/modules/core/event.js
new file mode 100644
index 0000000..f93f661
--- /dev/null
+++ b/spec/spec/modules/core/event.js
@@ -0,0 +1,213 @@
+/* globals describe, expect, it, spyOn, jasmine */
+import { windowEvents, getEvents, getEventTarget, clearEvents, dispatch, on, off } from '../../../../src/modules/core/event.js'
+import { getWindow } from '../../../../src/utils/window.js'
+import { EventTarget, SVG } from '../../../../src/main.js'
+
+const { any, createSpy } = jasmine
+
+describe('event.js', () => {
+  describe('getEvents()', () => {
+    it('returns the instance events for an EventTarget', () => {
+      const eventTarget = new EventTarget()
+      eventTarget.events = 'Test'
+      const events = getEvents(eventTarget)
+      expect(events).toBe('Test')
+    })
+
+    it('accesses windowEvents if instance is window', () => {
+      windowEvents.events = 'bla'
+      const events = getEvents(SVG(getWindow()))
+      expect(events).toBe(windowEvents.events)
+    })
+  })
+
+  describe('getEventTarget()', () => {
+    it('calls getEventTarget() on the instance', () => {
+      const eventTarget = new EventTarget()
+      const spy = spyOn(eventTarget, 'getEventTarget')
+      getEventTarget(eventTarget)
+      expect(spy).toHaveBeenCalled()
+    })
+  })
+
+  describe('clearEvents()', () => {
+    it('sets events to an empty object', () => {
+      const eventTarget = new EventTarget()
+      eventTarget.events = 'Test'
+      clearEvents(eventTarget)
+      expect(eventTarget.events).toEqual({})
+    })
+
+    it('doesnt do anything if no event object is found on the instance', () => {
+      const eventTarget = new EventTarget()
+      delete eventTarget.events
+      clearEvents(eventTarget)
+      expect(eventTarget.events).toBe(undefined)
+    })
+  })
+
+  describe('on()', () => {
+    it('binds an event to an EventTarget', () => {
+      const eventTarget = new EventTarget()
+      const spy = createSpy('spy')
+      on(eventTarget, 'event', spy)
+      dispatch(eventTarget, 'event')
+      expect(spy).toHaveBeenCalledWith(any(getWindow().CustomEvent))
+    })
+
+    it('binds to multiple events with space or comma seperated string', () => {
+      const eventTarget = new EventTarget()
+      const spy = createSpy('spy')
+      on(eventTarget, 'event1 event2, event3', spy)
+      dispatch(eventTarget, 'event1')
+      dispatch(eventTarget, 'event2')
+      dispatch(eventTarget, 'event3')
+      expect(spy).toHaveBeenCalledTimes(3)
+    })
+
+    it('binds to multiple events passed as array', () => {
+      const eventTarget = new EventTarget()
+      const spy = createSpy('spy')
+      on(eventTarget, [ 'event1', 'event2', 'event3' ], spy)
+      dispatch(eventTarget, 'event1')
+      dispatch(eventTarget, 'event2')
+      dispatch(eventTarget, 'event3')
+      expect(spy).toHaveBeenCalledTimes(3)
+    })
+
+    it('binds a namespaced event of form event.namespace', () => {
+      const eventTarget = new EventTarget()
+      const spy = createSpy('spy')
+      on(eventTarget, 'event.namespace', spy)
+      dispatch(eventTarget, 'event')
+      expect(spy).toHaveBeenCalledWith(any(getWindow().CustomEvent))
+    })
+  })
+
+  describe('off()', () => {
+    it('unbinds an event of an EventTarget', () => {
+      const eventTarget = new EventTarget()
+      const spy = createSpy('spy')
+      on(eventTarget, 'event', spy)
+      dispatch(eventTarget, 'event')
+      off(eventTarget, 'event', spy)
+      dispatch(eventTarget, 'event')
+      expect(spy).toHaveBeenCalledTimes(1)
+    })
+
+    it('unbinds multiple events with space or comma seperated string', () => {
+      const eventTarget = new EventTarget()
+      const spy = createSpy('spy')
+      on(eventTarget, 'event1 event2, event3', spy)
+      dispatch(eventTarget, 'event1')
+      dispatch(eventTarget, 'event2')
+      dispatch(eventTarget, 'event3')
+      off(eventTarget, 'event1 event2, event3', spy)
+      dispatch(eventTarget, 'event1')
+      dispatch(eventTarget, 'event2')
+      dispatch(eventTarget, 'event3')
+      expect(spy).toHaveBeenCalledTimes(3)
+    })
+
+    it('unbinds multiple events with space or comma seperated string', () => {
+      const eventTarget = new EventTarget()
+      const spy = createSpy('spy')
+      on(eventTarget, [ 'event1', 'event2', 'event3' ], spy)
+      dispatch(eventTarget, 'event1')
+      dispatch(eventTarget, 'event2')
+      dispatch(eventTarget, 'event3')
+      off(eventTarget, [ 'event1', 'event2', 'event3' ], spy)
+      dispatch(eventTarget, 'event1')
+      dispatch(eventTarget, 'event2')
+      dispatch(eventTarget, 'event3')
+      expect(spy).toHaveBeenCalledTimes(3)
+    })
+
+    it('unbinds a namespaced event', () => {
+      const eventTarget = new EventTarget()
+      const spy = createSpy('spy')
+      on(eventTarget, 'event.namespace', spy)
+      dispatch(eventTarget, 'event')
+      off(eventTarget, 'event.namespace', spy)
+      dispatch(eventTarget, 'event')
+      expect(spy).toHaveBeenCalledTimes(1)
+    })
+
+    it('unbinds all events incuding namespaced ones when only event is passed', () => {
+      const eventTarget = new EventTarget()
+      const spy = createSpy('spy')
+      on(eventTarget, [ 'event1.ns1', 'event2.ns2', 'event3' ], spy)
+      dispatch(eventTarget, 'event1')
+      dispatch(eventTarget, 'event2')
+      dispatch(eventTarget, 'event3')
+      off(eventTarget, [ 'event1', 'event2', 'event3' ])
+      dispatch(eventTarget, 'event1')
+      dispatch(eventTarget, 'event2')
+      dispatch(eventTarget, 'event3')
+      expect(spy).toHaveBeenCalledTimes(3)
+    })
+
+    it('unbinds with namespace only', () => {
+      const eventTarget = new EventTarget()
+      const spy1 = createSpy('spy1')
+      const spy2 = createSpy('spy2')
+      const spy3 = createSpy('spy3')
+      on(eventTarget, 'event1.ns1', spy1)
+      on(eventTarget, 'event2.ns1', spy2)
+      on(eventTarget, 'event3.ns2', spy3)
+      dispatch(eventTarget, 'event1')
+      dispatch(eventTarget, 'event2')
+      dispatch(eventTarget, 'event3')
+      off(eventTarget, '.ns1')
+      dispatch(eventTarget, 'event1')
+      dispatch(eventTarget, 'event2')
+      dispatch(eventTarget, 'event3')
+      expect(spy1).toHaveBeenCalledTimes(1)
+      expect(spy2).toHaveBeenCalledTimes(1)
+      expect(spy3).toHaveBeenCalledTimes(2)
+    })
+
+    it('unbinds all events when called without event', () => {
+      const eventTarget = new EventTarget()
+      const spy1 = createSpy('spy1')
+      const spy2 = createSpy('spy2')
+      const spy3 = createSpy('spy3')
+      on(eventTarget, 'event1.ns1', spy1)
+      on(eventTarget, 'event2.ns1', spy2)
+      on(eventTarget, 'event3.ns2', spy3)
+      dispatch(eventTarget, 'event1')
+      dispatch(eventTarget, 'event2')
+      dispatch(eventTarget, 'event3')
+      off(eventTarget)
+      dispatch(eventTarget, 'event1')
+      dispatch(eventTarget, 'event2')
+      dispatch(eventTarget, 'event3')
+      expect(spy1).toHaveBeenCalledTimes(1)
+      expect(spy2).toHaveBeenCalledTimes(1)
+      expect(spy3).toHaveBeenCalledTimes(1)
+    })
+  })
+
+  describe('dispatch()', () => {
+    it('dispatches a custom event on the EventTarget by calling dispatchEvent()', () => {
+      const eventTarget = new EventTarget()
+      const spy = spyOn(eventTarget, 'dispatchEvent')
+      const event = dispatch(eventTarget, 'event', { some: 'data' }, { cancelable: false })
+      expect(event).toEqual(any(getWindow().CustomEvent))
+      expect(spy).toHaveBeenCalledWith(event)
+      expect(event.detail).toEqual({ some: 'data' })
+      expect(event.cancelable).toBe(false)
+    })
+
+    it('dispatches the passed event directly', () => {
+      const eventTarget = new EventTarget()
+      const spy = spyOn(eventTarget, 'dispatchEvent')
+
+      const CustomEvent = getWindow().CustomEvent
+      const event1 = new CustomEvent('event', { detail: { some: 'data' } })
+      const event2 = dispatch(eventTarget, event1)
+      expect(event1).toBe(event2)
+      expect(spy).toHaveBeenCalledWith(event1)
+    })
+  })
+})
diff --git a/spec/spec/modules/core/textable.js b/spec/spec/modules/core/textable.js
new file mode 100644
index 0000000..c634fb5
--- /dev/null
+++ b/spec/spec/modules/core/textable.js
@@ -0,0 +1,341 @@
+/* globals describe, expect, it, beforeEach, spyOn, container */
+
+import { SVG, Box, Tspan } from '../../../../src/main.js'
+
+describe('textable.js', () => {
+  var canvas, text, tspan
+
+  beforeEach(() => {
+    canvas = SVG().addTo(container)
+    text = canvas.text('Hello World')
+    tspan = text.get(0)
+  })
+
+  describe('x()', () => {
+    it('returns the value of x without an argument on a text', () => {
+      expect(text.x(0).x()).toBe(0)
+    })
+
+    it('sets the x value of the bbox with the first argument on a text', () => {
+      text.x(123)
+      expect(text.bbox().x).toBe(123)
+    })
+
+    it('sets the value of all lines', () => {
+      text.x(200)
+      text.each(function () {
+        expect(this.x()).toBe(text.x())
+      })
+    })
+
+    it('returns the value of x without an argument on a tspan', () => {
+      expect(tspan.x(10).x()).toBe(10)
+    })
+
+    it('sets the x value of the bbox with the first argument on a tspan', () => {
+      tspan.x(123)
+      expect(tspan.bbox().x).toBe(123)
+    })
+  })
+
+  describe('y()', () => {
+    it('returns the value of x without an argument on a text', () => {
+      expect(text.y(0).y()).toBe(0)
+    })
+
+    it('sets the x value of the bbox with the first argument on a text', () => {
+      text.y(123)
+      expect(text.bbox().y).toBe(123)
+    })
+
+    it('sets the value of all lines', () => {
+      text.y(200)
+      text.each(function () {
+        expect(this.y()).toBe(text.y())
+      })
+    })
+
+    it('returns the value of x without an argument on a tspan', () => {
+      expect(tspan.y(10).y()).toBe(10)
+    })
+
+    it('sets the x value of the bbox with the first argument on a tspan', () => {
+      tspan.y(123)
+      expect(tspan.bbox().y).toBe(123)
+    })
+  })
+
+  describe('move()', () => {
+    it('calls x() and y() with parameters on text', () => {
+      const spyX = spyOn(text, 'x').and.callThrough()
+      const spyY = spyOn(text, 'y').and.callThrough()
+      const box = new Box()
+      text.move(1, 2, box)
+      expect(spyX).toHaveBeenCalledWith(1, box)
+      expect(spyY).toHaveBeenCalledWith(2, box)
+    })
+
+    it('calls x() and y() with parameters on tspan', () => {
+      const spyX = spyOn(tspan, 'x').and.callThrough()
+      const spyY = spyOn(tspan, 'y').and.callThrough()
+      const box = new Box()
+      tspan.move(1, 2, box)
+      expect(spyX).toHaveBeenCalledWith(1, box)
+      expect(spyY).toHaveBeenCalledWith(2, box)
+    })
+  })
+
+  describe('ax()', () => {
+    it('sets the value of x with a percent value with Text', () => {
+      text.ax('40%')
+      expect(text.node.getAttribute('x')).toBe('40%')
+    })
+
+    it('returns the value of x when x is a percentual value with Text', () => {
+      expect(text.ax('40%').ax()).toBe('40%')
+    })
+
+    it('sets the value of x with a percent value with Tspan', () => {
+      tspan.ax('40%')
+      expect(tspan.node.getAttribute('x')).toBe('40%')
+    })
+
+    it('returns the value of x when x is a percentual value with Tspan', () => {
+      tspan.ax('40%')
+      expect(tspan.ax()).toBe('40%')
+    })
+  })
+
+  describe('ay()', () => {
+    it('sets the value of y with a percent value with Text', () => {
+      text.ay('40%')
+      expect(text.node.getAttribute('y')).toBe('40%')
+    })
+
+    it('returns the value of y when y is a percentual value with Tspan', () => {
+      expect(text.ay('45%').ay()).toBe('45%')
+    })
+
+    it('sets the value of y with a percent value with Text', () => {
+      tspan.ay('40%')
+      expect(tspan.node.getAttribute('y')).toBe('40%')
+    })
+
+    it('returns the value of y when y is a percentual value with Tspan', () => {
+      tspan.ay('40%')
+      expect(tspan.ay()).toBe('40%')
+    })
+  })
+
+  describe('move()', () => {
+    it('calls ax() and ay() with parameters on text', () => {
+      const spyX = spyOn(text, 'ax').and.callThrough()
+      const spyY = spyOn(text, 'ay').and.callThrough()
+      text.amove(1, 2)
+      expect(spyX).toHaveBeenCalledWith(1)
+      expect(spyY).toHaveBeenCalledWith(2)
+    })
+
+    it('calls ax() and ay() with parameters on tspan', () => {
+      const spyX = spyOn(tspan, 'ax').and.callThrough()
+      const spyY = spyOn(tspan, 'ay').and.callThrough()
+      tspan.amove(1, 2)
+      expect(spyX).toHaveBeenCalledWith(1)
+      expect(spyY).toHaveBeenCalledWith(2)
+    })
+  })
+
+  // this is a hackish. It should not be neccessary to use toBeCloseTo but bbox with text is a thing...
+  describe('cx()', () => {
+    it('returns the value of cx without an argument with Text', () => {
+      var box = text.bbox()
+      expect(text.cx()).toBeCloseTo(box.x + box.width / 2)
+    })
+
+    it('sets the value of cx with the first argument with Text', () => {
+      text.cx(123)
+      var box = text.bbox()
+      expect(box.cx).toBeCloseTo(box.x + box.width / 2)
+    })
+
+    it('returns the value of cx without an argument with Tspan', () => {
+      var box = tspan.bbox()
+      expect(tspan.cx()).toBeCloseTo(box.x + box.width / 2)
+    })
+
+    it('sets the value of cx with the first argument with Tspan', () => {
+      tspan.cx(123)
+      var box = tspan.bbox()
+      expect(box.cx).toBeCloseTo(box.x + box.width / 2)
+    })
+  })
+
+  describe('cy()', () => {
+    it('returns the value of cy without an argument with Tspan', () => {
+      var box = tspan.bbox()
+      expect(tspan.cy()).toBe(box.cy)
+    })
+
+    it('sets the value of cy with the first argument with Tspan', () => {
+      tspan.cy(345)
+      var box = tspan.bbox()
+      expect(Math.round(box.cy * 10) / 10).toBe(345)
+    })
+
+    it('returns the value of cy without an argument with Tspan', () => {
+      var box = tspan.bbox()
+      expect(tspan.cy()).toBe(box.cy)
+    })
+
+    it('sets the value of cy with the first argument with Tspan', () => {
+      tspan.cy(345)
+      var box = tspan.bbox()
+      expect(Math.round(box.cy * 10) / 10).toBe(345)
+    })
+  })
+
+  describe('center()', () => {
+    it('calls cx() and cy() with parameters on Text', () => {
+      const spyX = spyOn(text, 'cx').and.callThrough()
+      const spyY = spyOn(text, 'cy').and.callThrough()
+      const box = new Box()
+      text.center(1, 2, box)
+      expect(spyX).toHaveBeenCalledWith(1, box)
+      expect(spyY).toHaveBeenCalledWith(2, box)
+    })
+
+    it('calls cx() and cy() with parameters on Tspan', () => {
+      const spyX = spyOn(tspan, 'cx').and.callThrough()
+      const spyY = spyOn(tspan, 'cy').and.callThrough()
+      const box = new Box()
+      tspan.center(1, 2, box)
+      expect(spyX).toHaveBeenCalledWith(1, box)
+      expect(spyY).toHaveBeenCalledWith(2, box)
+    })
+  })
+
+  describe('plain()', () => {
+    it('adds content without a tspan with Text', () => {
+      text.plain('It is a bear!')
+      expect(text.node.childNodes[0].nodeType).toBe(3)
+      expect(text.node.childNodes[0].data).toBe('It is a bear!')
+    })
+
+    it('clears content before adding new content with Text', () => {
+      text.plain('It is not a bear!')
+      expect(text.node.childNodes.length).toBe(1)
+      expect(text.node.childNodes[0].data).toBe('It is not a bear!')
+    })
+
+    it('restores the content from the dom with Text', () => {
+      text.plain('Just plain text!')
+      expect(text.text()).toBe('Just plain text!')
+    })
+
+    it('adds content without a tspan with Tspan', () => {
+      tspan.plain('It is a bear!')
+      expect(tspan.node.childNodes[0].nodeType).toBe(3)
+      expect(tspan.node.childNodes[0].data).toBe('It is a bear!')
+    })
+
+    it('clears content before adding new content with Tspan', () => {
+      tspan.plain('It is not a bear!')
+      expect(tspan.node.childNodes.length).toBe(1)
+      expect(tspan.node.childNodes[0].data).toBe('It is not a bear!')
+    })
+
+    it('restores the content from the dom with Tspan', () => {
+      // We create a new Tspan here because the one used before was part of text creation
+      // and therefore is marked as newline and thats not what we want to test
+      const tspan = new Tspan().plain('Just plain text!')
+      expect(tspan.text()).toBe('Just plain text!')
+    })
+  })
+
+  describe('length()', () => {
+    it('gets total length of text', () => {
+      text.text(function (add) {
+        add.tspan('The first.')
+        add.tspan('The second.')
+        add.tspan('The third.')
+      })
+      expect(text.length()).toBeCloseTo(text.get(0).length() + text.get(1).length() + text.get(2).length(), 3)
+    })
+
+    it('gets total length of tspan', () => {
+      tspan.text(function (add) {
+        add.tspan('The first.')
+        add.tspan('The second.')
+        add.tspan('The third.')
+      })
+      expect(tspan.length()).toBeCloseTo(tspan.get(0).length() + tspan.get(1).length() + tspan.get(2).length(), 3)
+    })
+  })
+
+  describe('build()', () => {
+    it('enables adding multiple plain text nodes when given true for Text', () => {
+      text.clear().build(true)
+      text.plain('A great piece!')
+      text.plain('Another great piece!')
+      expect(text.node.childNodes[0].data).toBe('A great piece!')
+      expect(text.node.childNodes[1].data).toBe('Another great piece!')
+    })
+
+    it('enables adding multiple tspan nodes when given true for Text', () => {
+      text.clear().build(true)
+      text.tspan('A great piece!')
+      text.tspan('Another great piece!')
+      expect(text.node.childNodes[0].childNodes[0].data).toBe('A great piece!')
+      expect(text.node.childNodes[1].childNodes[0].data).toBe('Another great piece!')
+    })
+
+    it('disables adding multiple plain text nodes when given false for Text', () => {
+      text.clear().build(true)
+      text.plain('A great piece!')
+      text.build(false).plain('Another great piece!')
+      expect(text.node.childNodes[0].data).toBe('Another great piece!')
+      expect(text.node.childNodes[1]).toBe(undefined)
+    })
+
+    it('disables adding multiple tspan nodes when given false for Text', () => {
+      text.clear().build(true)
+      text.tspan('A great piece!')
+      text.build(false).tspan('Another great piece!')
+      expect(text.node.childNodes[0].childNodes[0].data).toBe('Another great piece!')
+      expect(text.node.childNodes[1]).toBe(undefined)
+    })
+
+    it('enables adding multiple plain text nodes when given true for Tspan', () => {
+      tspan.clear().build(true)
+      tspan.plain('A great piece!')
+      tspan.plain('Another great piece!')
+      expect(tspan.node.childNodes[0].data).toBe('A great piece!')
+      expect(tspan.node.childNodes[1].data).toBe('Another great piece!')
+    })
+
+    it('enables adding multiple text nodes when given true for Tspan', () => {
+      tspan.clear().build(true)
+      tspan.tspan('A great piece!')
+      tspan.tspan('Another great piece!')
+      expect(tspan.node.childNodes[0].childNodes[0].data).toBe('A great piece!')
+      expect(tspan.node.childNodes[1].childNodes[0].data).toBe('Another great piece!')
+    })
+
+    it('disables adding multiple plain text nodes when given false for Tspan', () => {
+      tspan.clear().build(true)
+      tspan.plain('A great piece!')
+      tspan.build(false).plain('Another great piece!')
+      expect(tspan.node.childNodes[0].data).toBe('Another great piece!')
+      expect(tspan.node.childNodes[1]).toBe(undefined)
+    })
+
+    it('disables adding multiple tspan nodes when given false for Tspan', () => {
+      tspan.clear().build(true)
+      tspan.tspan('A great piece!')
+      tspan.build(false).tspan('Another great piece!')
+      expect(tspan.node.childNodes[0].childNodes[0].data).toBe('Another great piece!')
+      expect(tspan.node.childNodes[1]).toBe(undefined)
+    })
+  })
+
+})
diff --git a/spec/spec/sugar.js b/spec/spec/sugar.js
index 704643d..d247242 100644
--- a/spec/spec/sugar.js
+++ b/spec/spec/sugar.js
@@ -1,257 +1,257 @@
-describe('Sugar', function() {
+describe('Sugar', function () {
 
   var rect
 
-  beforeEach(function() {
+  beforeEach(function () {
     draw.attr('viewBox', null)
   })
 
-  afterEach(function() {
+  afterEach(function () {
     draw.clear()
   })
 
-  describe('fill()', function() {
-    beforeEach(function() {
-      rect = draw.rect(100,100)
+  describe('fill()', function () {
+    beforeEach(function () {
+      rect = draw.rect(100, 100)
     })
 
-    afterEach(function() {
+    afterEach(function () {
       rect.remove()
     })
 
-    it('returns the node reference', function() {
+    it('returns the node reference', function () {
       expect(rect.fill('red')).toBe(rect)
     })
 
-    it('sets the given value', function() {
+    it('sets the given value', function () {
       expect(rect.fill('red').attr('fill')).toBe('red')
     })
 
-    it('sets the given value with object given', function() {
-      rect.fill({color: 'red', opacity: 0.5, rule: 'odd'})
+    it('sets the given value with object given', function () {
+      rect.fill({ color: 'red', opacity: 0.5, rule: 'odd' })
       expect(rect.attr('fill')).toBe('red')
       expect(rect.attr('fill-opacity')).toBe(0.5)
       expect(rect.attr('fill-rule')).toBe('odd')
     })
 
-    it('returns fill color when called as getter', function() {
+    it('returns fill color when called as getter', function () {
       rect.fill('red')
       expect(rect.fill()).toBe('red')
     })
   })
 
-  describe('rotate()', function() {
+  describe('rotate()', function () {
     var rect, spy, undefined
 
-    beforeEach(function() {
-      rect = draw.rect(100,100)
+    beforeEach(function () {
+      rect = draw.rect(100, 100)
       spyOn(rect, 'transform')
     })
 
-    afterEach(function() {
+    afterEach(function () {
       rect.remove()
       rect.transform.calls.reset()
     })
 
-    it('redirects to transform()', function() {
-      rect.rotate(1,2,3)
-      expect(rect.transform).toHaveBeenCalledWith({ rotate: 1, ox: 2, oy:3 }, true)
+    it('redirects to transform()', function () {
+      rect.rotate(1, 2, 3)
+      expect(rect.transform).toHaveBeenCalledWith({ rotate: 1, ox: 2, oy: 3 }, true)
     })
   })
 
-  describe('skew()', function() {
+  describe('skew()', function () {
     var rect, spy, undefined
 
-    beforeEach(function() {
-      rect = draw.rect(100,100)
+    beforeEach(function () {
+      rect = draw.rect(100, 100)
       spyOn(rect, 'transform')
     })
 
-    afterEach(function() {
+    afterEach(function () {
       rect.remove()
       rect.transform.calls.reset()
     })
 
-    it('redirects to transform() with no argument', function() {
+    it('redirects to transform() with no argument', function () {
       rect.skew()
-      expect(rect.transform).toHaveBeenCalledWith({ skew: [undefined, undefined], ox: undefined, oy: undefined }, true)
+      expect(rect.transform).toHaveBeenCalledWith({ skew: [ undefined, undefined ], ox: undefined, oy: undefined }, true)
     })
 
-    it('redirects to transform() with one argument', function() {
+    it('redirects to transform() with one argument', function () {
       rect.skew(5)
       expect(rect.transform).toHaveBeenCalledWith({ skew: 5, ox: undefined, oy: undefined }, true)
     })
 
-    it('redirects to transform() with two argument', function() {
+    it('redirects to transform() with two argument', function () {
       rect.skew(5, 6)
-      expect(rect.transform).toHaveBeenCalledWith({ skew: [5, 6], ox: undefined, oy: undefined}, true)
+      expect(rect.transform).toHaveBeenCalledWith({ skew: [ 5, 6 ], ox: undefined, oy: undefined }, true)
     })
 
-    it('redirects to transform() with three arguments', function() {
+    it('redirects to transform() with three arguments', function () {
       rect.skew(5, 6, 7)
       expect(rect.transform).toHaveBeenCalledWith({ skew: 5, ox: 6, oy: 7 }, true)
     })
 
-    it('redirects to transform() with four arguments', function() {
+    it('redirects to transform() with four arguments', function () {
       rect.skew(5, 6, 7, 8)
-      expect(rect.transform).toHaveBeenCalledWith({ skew: [5, 6], ox: 7, oy: 8 }, true)
+      expect(rect.transform).toHaveBeenCalledWith({ skew: [ 5, 6 ], ox: 7, oy: 8 }, true)
     })
   })
 
-  describe('scale()', function() {
+  describe('scale()', function () {
     var rect, spy, undefined
 
-    beforeEach(function() {
-      rect = draw.rect(100,100)
+    beforeEach(function () {
+      rect = draw.rect(100, 100)
       spyOn(rect, 'transform')
     })
 
-    afterEach(function() {
+    afterEach(function () {
       rect.remove()
       rect.transform.calls.reset()
     })
 
-    it('redirects to transform() with no argument', function() {
+    it('redirects to transform() with no argument', function () {
       rect.scale()
-      expect(rect.transform).toHaveBeenCalledWith({ scale: [undefined, undefined], ox: undefined, oy: undefined }, true)
+      expect(rect.transform).toHaveBeenCalledWith({ scale: [ undefined, undefined ], ox: undefined, oy: undefined }, true)
     })
 
-    it('redirects to transform() with one argument', function() {
+    it('redirects to transform() with one argument', function () {
       rect.scale(5)
-      expect(rect.transform).toHaveBeenCalledWith({ scale: 5, ox: undefined, oy: undefined}, true)
+      expect(rect.transform).toHaveBeenCalledWith({ scale: 5, ox: undefined, oy: undefined }, true)
     })
 
-    it('redirects to transform() with two argument', function() {
+    it('redirects to transform() with two argument', function () {
       rect.scale(5, 6)
-      expect(rect.transform).toHaveBeenCalledWith({ scale: [5, 6], ox: undefined, oy: undefined }, true)
+      expect(rect.transform).toHaveBeenCalledWith({ scale: [ 5, 6 ], ox: undefined, oy: undefined }, true)
     })
 
-    it('redirects to transform() with three arguments', function() {
+    it('redirects to transform() with three arguments', function () {
       rect.scale(5, 6, 7)
       expect(rect.transform).toHaveBeenCalledWith({ scale: 5, ox: 6, oy: 7 }, true)
     })
 
-    it('redirects to transform() with four arguments', function() {
+    it('redirects to transform() with four arguments', function () {
       rect.scale(5, 6, 7, 8)
-      expect(rect.transform).toHaveBeenCalledWith({ scale: [5, 6], ox: 7, oy: 8 }, true)
+      expect(rect.transform).toHaveBeenCalledWith({ scale: [ 5, 6 ], ox: 7, oy: 8 }, true)
     })
   })
 
-  describe('translate()', function() {
+  describe('translate()', function () {
     var rect, spy, undefined
 
-    beforeEach(function() {
-      rect = draw.rect(100,100)
+    beforeEach(function () {
+      rect = draw.rect(100, 100)
       spyOn(rect, 'transform')
     })
 
-    afterEach(function() {
+    afterEach(function () {
       rect.remove()
       rect.transform.calls.reset()
     })
 
-    it('redirects to transform()', function() {
-      rect.translate(1,2)
-      expect(rect.transform).toHaveBeenCalledWith({ translate: [1, 2] }, true)
+    it('redirects to transform()', function () {
+      rect.translate(1, 2)
+      expect(rect.transform).toHaveBeenCalledWith({ translate: [ 1, 2 ] }, true)
     })
   })
 
-  describe('flip()', function() {
+  describe('flip()', function () {
     var rect, spy, undefined
 
-    beforeEach(function() {
-      rect = draw.rect(100,100)
+    beforeEach(function () {
+      rect = draw.rect(100, 100)
       spyOn(rect, 'transform')
     })
 
-    afterEach(function() {
+    afterEach(function () {
       rect.remove()
       rect.transform.calls.reset()
     })
 
-    it('redirects to transform()', function() {
+    it('redirects to transform()', function () {
       rect.flip('x', 2)
-      expect(rect.transform).toHaveBeenCalledWith({ flip: 'x', origin: [2, 0] }, true)
+      expect(rect.transform).toHaveBeenCalledWith({ flip: 'x', origin: 2 }, true)
     })
 
-    it('sets flip to "both" when calling without anything', function() {
+    it('sets flip to "both" when calling without anything', function () {
       rect.flip()
-      expect(rect.transform).toHaveBeenCalledWith({ flip: 'both', origin: [0, 0] }, true)
+      expect(rect.transform).toHaveBeenCalledWith({ flip: 'both', origin: 'center' }, true)
     })
 
     // this works because only x and y are valid flip values. Evereything else flips on both axis
-    it('sets flip to number and offset to number when called with offset only', function() {
+    it('sets flip to both and origin to number when called with origin only', function () {
       rect.flip(5)
-      expect(rect.transform).toHaveBeenCalledWith({ flip: "both", origin: [5, 5] }, true)
+      expect(rect.transform).toHaveBeenCalledWith({ flip: 'both', origin: 5 }, true)
     })
   })
 
-  describe('matrix()', function() {
+  describe('matrix()', function () {
     var rect, spy, undefined
 
-    beforeEach(function() {
-      rect = draw.rect(100,100)
+    beforeEach(function () {
+      rect = draw.rect(100, 100)
       spyOn(rect, 'attr')
     })
 
-    afterEach(function() {
+    afterEach(function () {
       rect.remove()
       rect.attr.calls.reset()
     })
 
-    it('redirects to attr() directly with one argument', function() {
-      rect.matrix([1,2,3,4,5,6])
-      expect(rect.attr).toHaveBeenCalledWith('transform', new SVG.Matrix([1,2,3,4,5,6]))
+    it('redirects to attr() directly with one argument', function () {
+      rect.matrix([ 1, 2, 3, 4, 5, 6 ])
+      expect(rect.attr).toHaveBeenCalledWith('transform', new SVG.Matrix([ 1, 2, 3, 4, 5, 6 ]))
     })
 
-    it('redirects to attr() directly with 6 arguments', function() {
-      rect.matrix(1,2,3,4,5,6)
-      expect(rect.attr).toHaveBeenCalledWith('transform', new SVG.Matrix([1,2,3,4,5,6]))
+    it('redirects to attr() directly with 6 arguments', function () {
+      rect.matrix(1, 2, 3, 4, 5, 6)
+      expect(rect.attr).toHaveBeenCalledWith('transform', new SVG.Matrix([ 1, 2, 3, 4, 5, 6 ]))
     })
   })
 
-  describe('opacity()', function() {
+  describe('opacity()', function () {
     var rect, spy, undefined
 
-    beforeEach(function() {
-      rect = draw.rect(100,100)
+    beforeEach(function () {
+      rect = draw.rect(100, 100)
       spyOn(rect, 'attr')
     })
 
-    afterEach(function() {
+    afterEach(function () {
       rect.remove()
       rect.attr.calls.reset()
     })
 
-    it('redirects to attr() directly', function() {
+    it('redirects to attr() directly', function () {
       rect.opacity(0.5)
       expect(rect.attr).toHaveBeenCalledWith('opacity', 0.5)
     })
   })
 
-  describe('dx() / dy()', function() {
+  describe('dx() / dy()', function () {
     var rect, spy, undefined
 
-    beforeEach(function() {
-      rect = draw.rect(100,100)
+    beforeEach(function () {
+      rect = draw.rect(100, 100)
       spyOn(rect, 'x').and.callThrough()
       spyOn(rect, 'y').and.callThrough()
     })
 
-    afterEach(function() {
+    afterEach(function () {
       rect.remove()
       rect.x.calls.reset()
       rect.y.calls.reset()
     })
 
-    it('redirects to x() / y() with adding the current value', function() {
+    it('redirects to x() / y() with adding the current value', function () {
       rect.dx(5)
       rect.dy(5)
       expect(rect.x).toHaveBeenCalledWith(jasmine.objectContaining(new SVG.Number('5')))
       expect(rect.y).toHaveBeenCalledWith(jasmine.objectContaining(new SVG.Number('5')))
     })
 
-    it('allows to add a percentage value', function() {
+    it('allows to add a percentage value', function () {
       rect.move('5%', '5%')
 
       rect.dx('5%')
@@ -261,7 +261,7 @@ describe('Sugar', function() {
       expect(rect.y).toHaveBeenCalledWith(jasmine.objectContaining(new SVG.Number('10%')))
     })
 
-    it('allows to add a percentage value when no x/y is set', function() {
+    it('allows to add a percentage value when no x/y is set', function () {
       rect.dx('5%')
       rect.dy('5%')
 
@@ -270,54 +270,54 @@ describe('Sugar', function() {
     })
   })
 
-  describe('dmove()', function() {
+  describe('dmove()', function () {
     var rect, spy, undefined
 
-    beforeEach(function() {
-      rect = draw.rect(100,100)
+    beforeEach(function () {
+      rect = draw.rect(100, 100)
       spyOn(rect, 'dx').and.callThrough()
       spyOn(rect, 'dy').and.callThrough()
     })
 
-    afterEach(function() {
+    afterEach(function () {
       rect.remove()
       rect.dx.calls.reset()
       rect.dy.calls.reset()
     })
 
-    it('redirects to dx() / dy() directly', function() {
-      rect.dmove(5,5)
+    it('redirects to dx() / dy() directly', function () {
+      rect.dmove(5, 5)
       expect(rect.dx).toHaveBeenCalledWith(5)
       expect(rect.dy).toHaveBeenCalledWith(5)
     })
   })
 
-  describe('font()', function() {
+  describe('font()', function () {
     var text, spy, undefined
 
-    beforeEach(function() {
+    beforeEach(function () {
       text = draw.text(loremIpsum)
       spyOn(text, 'leading')
       spyOn(text, 'attr')
     })
 
-    afterEach(function() {
+    afterEach(function () {
       text.remove()
       text.leading.calls.reset()
       text.attr.calls.reset()
     })
 
-    it('sets leading when given', function() {
-      text.font({leading: 3})
+    it('sets leading when given', function () {
+      text.font({ leading: 3 })
       expect(text.leading).toHaveBeenCalledWith(3)
     })
 
-    it('sets text-anchor when anchor given', function() {
-      text.font({anchor: 'start'})
+    it('sets text-anchor when anchor given', function () {
+      text.font({ anchor: 'start' })
       expect(text.attr).toHaveBeenCalledWith('text-anchor', 'start')
     })
 
-    it('sets all font properties via attr()', function() {
+    it('sets all font properties via attr()', function () {
       text.font({
         size: 20,
         family: 'Verdana',
@@ -334,21 +334,21 @@ describe('Sugar', function() {
       expect(text.attr).toHaveBeenCalledWith('font-style', 'italic')
     })
 
-    it('redirects all other stuff directly to attr()', function() {
+    it('redirects all other stuff directly to attr()', function () {
       text.font({
-        foo:'bar',
-        bar:'baz'
+        foo: 'bar',
+        bar: 'baz'
       })
       expect(text.attr).toHaveBeenCalledWith('foo', 'bar')
       expect(text.attr).toHaveBeenCalledWith('bar', 'baz')
     })
 
-    it('sets key value pair when called with 2 parameters', function() {
+    it('sets key value pair when called with 2 parameters', function () {
       text.font('size', 20)
       expect(text.attr).toHaveBeenCalledWith('font-size', 20)
     })
 
-    it('gets value if called with one parameter', function() {
+    it('gets value if called with one parameter', function () {
       text.font('size')
       expect(text.attr).toHaveBeenCalledWith('font-size', undefined)
     })
diff --git a/spec/spec/text.js b/spec/spec/text.js
deleted file mode 100644
index 0bef0d1..0000000
--- a/spec/spec/text.js
+++ /dev/null
@@ -1,286 +0,0 @@
-// IMPORTANT!!!
-// The native getBBox() on text elements isn't always accurate in the decimals.
-// Therefore sometimes some rounding is used to make test work as expected.
-
-describe('Text', function() {
-  var text
-
-  beforeEach(function() {
-    text = draw.text(loremIpsum).size(5)
-  })
-
-  afterEach(function() {
-    draw.clear()
-  })
-
-  describe('leading()', function() {
-    it('returns the leading value of the text without an argument', function() {
-      expect(text.leading() instanceof SVG.Number)
-      expect(text.leading().valueOf()).toBe(1.3)
-    })
-    it('sets the leading value of the text with the first argument', function() {
-      expect(text.leading(1.5).dom.leading.valueOf()).toBe(1.5)
-    })
-  })
-
-  describe('rebuild()', function() {
-    it('disables the rebuild if called with false', function() {
-      expect(text.rebuild(false)._rebuild).toBeFalsy()
-    })
-    it('enables the rebuild if called with true', function() {
-      expect(text.rebuild(true)._rebuild).toBeTruthy()
-    })
-    it('rebuilds the text without an argument given', function() {
-      var dy = text.get(2).attr('dy')
-      text.leading(1.7)
-      expect(dy == text.get(2).attr('dy')).toBeFalsy()
-    })
-  })
-
-  describe('x()', function() {
-    it('returns the value of x without an argument', function() {
-      expect(text.x(0).x()).toBe(0)
-    })
-    it('sets the x value of the bbox with the first argument', function() {
-      text.x(123)
-      expect(text.bbox().x).toBe(123)
-    })
-    it('sets the value of all lines', function() {
-      text.x(200)
-      text.each(function() {
-        expect(this.x()).toBe(text.attr('x'))
-      })
-    })
-  })
-
-  describe('ax()', function () {
-    it('sets the value of x with a percent value', function() {
-      text.ax('40%')
-      expect(text.node.getAttribute('x')).toBe('40%')
-    })
-    it('returns the value of x when x is a percentual value', function() {
-      expect(text.ax('45%').ax()).toBe('45%')
-    })
-  })
-
-  describe('y()', function() {
-    it('returns the value of y without an argument', function() {
-      expect(text.y(0).y()).toBeCloseTo(0)
-    })
-    it('sets the y value of the bbox with the first argument', function() {
-      text.y(345)
-      var box = text.bbox()
-      expect(box.y).toBe(345)
-    })
-  })
-
-  describe('ay()', function () {
-    it('sets the value of y with a percent value', function() {
-      text.ay('40%')
-      expect(text.node.getAttribute('y')).toBe('40%')
-    })
-    it('returns the value of y when y is a percentual value', function() {
-      expect(text.ay('45%').ay()).toBe('45%')
-    })
-  })
-
-
-  describe('cx()', function() {
-    it('returns the value of cx without an argument', function() {
-      var box = text.bbox()
-      expect(text.cx()).toBeCloseTo(box.x + box.width / 2)
-    })
-    it('sets the value of cx with the first argument', function() {
-      text.cx(123)
-      var box = text.bbox()
-      // this is a hack. it should be exactly 123 since you set it. But bbox with text is a thing...
-      expect(box.cx).toBeCloseTo(box.x + box.width/2)
-    })
-  })
-
-  describe('cy()', function() {
-    it('returns the value of cy without an argument', function() {
-      var box = text.bbox()
-      expect(text.cy()).toBe(box.cy)
-    })
-    it('sets the value of cy with the first argument', function() {
-      text.cy(345)
-      var box = text.bbox()
-      expect(Math.round(box.cy * 10) / 10).toBe(345)
-    })
-  })
-
-  describe('move()', function() {
-    it('sets the x and y position', function() {
-      text.move(123,456)
-      expect(text.bbox().x).toBe(123)
-      expect(text.bbox().y).toBe(456)
-    })
-  })
-
-  describe('center()', function() {
-    it('sets the cx and cy position', function() {
-      text.center(321, 567)
-      var box = text.bbox()
-      expect(text.bbox().cx).toBeCloseTo(321, 1)
-      expect(text.bbox().cy).toBeCloseTo(567, 1)
-    })
-  })
-
-  describe('translate()', function() {
-    it('sets the translation of an element', function() {
-      text.transform({ tx: 12, ty: 12 })
-      expect(text.node.getAttribute('transform')).toBe('matrix(1,0,0,1,12,12)')
-    })
-  })
-
-  describe('text()', function() {
-    it('adds content in a nested tspan', function() {
-      text.text('It is a bear!')
-      expect(text.node.childNodes[0].nodeType).toBe(1)
-      expect(text.node.childNodes[0].childNodes[0].data).toBe('It is a bear!')
-    })
-    it('adds content in a nested tspan even with an empty string', function() {
-      text.text('')
-      expect(text.node.childNodes[0].nodeType).toBe(1)
-      expect(text.node.childNodes[0].childNodes[0].data).toBe('')
-    })
-    it('creates multiple lines with a newline separated string', function() {
-      text.text('It is\nJUST\na bear!')
-      expect(text.node.childNodes.length).toBe(3)
-    })
-    it('restores the content from the dom', function() {
-      text.text('It is\nJUST\na bear!')
-      expect(text.text()).toBe('It is\nJUST\na bear!')
-    })
-    it('gets the given content of a text element without an argument', function() {
-      text.text('It is another bear!')
-      expect(text.node.childNodes[0].nodeType).toBe(1)
-      expect(text.text()).toMatch('It is another bear!')
-    })
-    it('accepts a block as first arguments', function() {
-      text.text(function(add) {
-        add.tspan('mastaba')
-        add.plain('hut')
-      })
-      expect(text.node.childNodes[0].nodeType).toBe(1)
-      expect(text.node.childNodes[0].childNodes[0].data).toBe('mastaba')
-      expect(text.node.childNodes[1].nodeType).toBe(3)
-      expect(text.node.childNodes[1].data).toBe('hut')
-    })
-  })
-
-  describe('plain()', function() {
-    it('adds content without a tspan', function() {
-      text.plain('It is a bear!')
-      expect(text.node.childNodes[0].nodeType).toBe(3)
-      expect(text.node.childNodes[0].data).toBe('It is a bear!')
-    })
-    it('clears content before adding new content', function() {
-      text.plain('It is not a bear!')
-      expect(text.node.childNodes.length).toBe(1)
-      expect(text.node.childNodes[0].data).toBe('It is not a bear!')
-    })
-    it('restores the content from the dom', function() {
-      text.plain('Just plain text!')
-      expect(text.text()).toBe('Just plain text!')
-    })
-  })
-
-  describe('tspan()', function() {
-    it('adds content in a tspan', function() {
-      text.tspan('It is a bear!')
-      expect(text.node.childNodes[0].nodeType).toBe(1)
-      expect(text.node.childNodes[0].childNodes[0].data).toBe('It is a bear!')
-    })
-    it('clears content before adding new content', function() {
-      text.tspan('It is not a bear!')
-      expect(text.node.childNodes.length).toBe(1)
-      expect(text.node.childNodes[0].childNodes[0].data).toBe('It is not a bear!')
-    })
-  })
-
-  describe('clear()', function() {
-    it('removes all content', function() {
-      text.text(function(add) {
-        add.tspan('The first.')
-        add.tspan('The second.')
-        add.tspan('The third.')
-      })
-      expect(text.node.childNodes.length).toBe(3)
-      text.clear()
-      expect(text.node.childNodes.length).toBe(0)
-    })
-  })
-
-  describe('lines()', function() {
-    it('gets an array of individual lines as an instance of SVG.Set', function() {
-      var l1, l2, l3
-      text.text(function(add) {
-        l1 = add.tspan('The first.')
-        l2 = add.tspan('The second.')
-        l3 = add.tspan('The third.')
-      })
-      expect(text.children().length).toBe(3)
-      expect(text.get(0)).toBe(l1)
-      expect(text.get(1)).toBe(l2)
-      expect(text.get(2)).toBe(l3)
-    })
-  })
-
-  describe('length()', function() {
-    it('gets total length of text', function() {
-      text.text(function(add) {
-        add.tspan('The first.')
-        add.tspan('The second.')
-        add.tspan('The third.')
-      })
-      expect(text.length()).toBeCloseTo(text.get(0).length() + text.get(1).length() + text.get(2).length(), 3)
-    })
-  })
-
-  describe('build()', function() {
-    it('enables adding multiple plain text nodes when given true', function() {
-      text.clear().build(true)
-      text.plain('A great piece!')
-      text.plain('Another great piece!')
-      expect(text.node.childNodes[0].data).toBe('A great piece!')
-      expect(text.node.childNodes[1].data).toBe('Another great piece!')
-    })
-    it('enables adding multiple tspan nodes when given true', function() {
-      text.clear().build(true)
-      text.tspan('A great piece!')
-      text.tspan('Another great piece!')
-      expect(text.node.childNodes[0].childNodes[0].data).toBe('A great piece!')
-      expect(text.node.childNodes[1].childNodes[0].data).toBe('Another great piece!')
-    })
-    it('disables adding multiple plain text nodes when given false', function() {
-      text.clear().build(true)
-      text.plain('A great piece!')
-      text.build(false).plain('Another great piece!')
-      expect(text.node.childNodes[0].data).toBe('Another great piece!')
-      expect(text.node.childNodes[1]).toBe(undefined)
-    })
-    it('disables adding multiple tspan nodes when given false', function() {
-      text.clear().build(true)
-      text.tspan('A great piece!')
-      text.build(false).tspan('Another great piece!')
-      expect(text.node.childNodes[0].childNodes[0].data).toBe('Another great piece!')
-      expect(text.node.childNodes[1]).toBe(undefined)
-    })
-  })
-
-  describe('setData()', function() {
-    it('read all data from the svgjs:data attribute and assign it to el.dom', function(){
-
-      text.attr('svgjs:data', '{"foo":"bar","leading":"3px"}')
-      text.setData(JSON.parse(text.attr('svgjs:data')))
-
-      expect(text.dom.foo).toBe('bar')
-      expect(text.dom.leading instanceof SVG.Number).toBeTruthy()
-      expect(text.dom.leading.value).toBe(3)
-      expect(text.dom.leading.unit).toBe('px')
-    })
-  })
-
-})
diff --git a/spec/spec/tspan.js b/spec/spec/tspan.js
deleted file mode 100644
index d8ac4b1..0000000
--- a/spec/spec/tspan.js
+++ /dev/null
@@ -1,46 +0,0 @@
-describe('Tspan', function() {
-  var text, tspan
-
-  beforeEach(function() {
-    text = draw.text(loremIpsum)
-    tspan = text.tspan('Hello World')
-  })
-
-  afterEach(function() {
-    draw.clear()
-  })
-
-  describe('newLine()', function() {
-    it('converts the tspan to a line', function() {
-      tspan = text.tspan('Hello World')
-      expect(tspan.newLine().dom.newLined).toBeTruthy()
-    })
-  })
-
-  describe('text()', function() {
-    it('returns the text of the tspan without newline when not newlined', function() {
-      tspan = text.tspan('Hello World')
-      expect(tspan.text()).toBe('Hello World')
-    })
-    it('returns the text of the tspan with newline when newlined', function() {
-      tspan = text.tspan('Hello World').newLine()
-      expect(tspan.text()).toBe('Hello World\n')
-    })
-    it('calls the function when function given', function() {
-      var spy = jasmine.createSpy('dummy')
-      tspan = text.tspan('Hello World')
-      tspan.text(spy)
-      expect(spy).toHaveBeenCalledWith(tspan)
-    })
-  })
-
-  describe('dx()', function() {
-    it('gets the dx value with no argument', function() {
-      tspan.attr('dx', 25)
-      expect(tspan.dx()).toBe(25)
-    })
-    it('sets the dx value whith the first argument', function() {
-      expect(tspan.dx(25).attr('dx')).toBe(25)
-    })
-  })
-})
diff --git a/spec/spec/types/ArrayPolyfill.js b/spec/spec/types/ArrayPolyfill.js
index 5609629..edf12bd 100644
--- a/spec/spec/types/ArrayPolyfill.js
+++ b/spec/spec/types/ArrayPolyfill.js
@@ -1,24 +1,26 @@
+/* globals describe, expect, it, jasmine */
+
 import { subClassArray } from '../../../src/types/ArrayPolyfill.js'
 const { any, createSpy } = jasmine
 
-describe('ArrayPolyfill.js', function() {
+describe('ArrayPolyfill.js', function () {
   describe('subClassArray()', function () {
     it('creates a new class inherited from Array', () => {
-      const myArray = subClassArray('myArray', Array, )
-      expect(new myArray()).toEqual(any(Array))
-      expect(new myArray()).toEqual(any(myArray))
+      const MyArray = subClassArray('myArray', Array)
+      expect(new MyArray()).toEqual(any(Array))
+      expect(new MyArray()).toEqual(any(MyArray))
     })
 
     it('sets the name attribute of the class correctly', () => {
-      const myArray = subClassArray('myArray', Array)
-      expect(myArray.name).toEqual('myArray')
+      const MyArray = subClassArray('myArray', Array)
+      expect(MyArray.name).toEqual('myArray')
     })
 
     it('calls the given function on construction', () => {
       const spy = createSpy()
-      const myArray = subClassArray('myArray', Array, spy)
+      const MyArray = subClassArray('myArray', Array, spy)
 
-      new myArray(1,2,3,4)
+      new MyArray(1, 2, 3, 4) // eslint-disable-line
       expect(spy).toHaveBeenCalledWith(1, 2, 3, 4)
     })
   })
diff --git a/spec/spec/types/Base.js b/spec/spec/types/Base.js
index 09ef453..f0cdfaa 100644
--- a/spec/spec/types/Base.js
+++ b/spec/spec/types/Base.js
@@ -1,9 +1,11 @@
+/* globals describe, expect, it, jasmine */
+
 import Base from '../../../src/types/Base.js'
 
 const { any } = jasmine
 
 describe('Base.js', () => {
   it('holds the base class', () => {
-    expect(new Base).toEqual(any(Base))
+    expect(new Base()).toEqual(any(Base))
   })
 })
diff --git a/spec/spec/types/Box.js b/spec/spec/types/Box.js
index 56eb7da..9735304 100644
--- a/spec/spec/types/Box.js
+++ b/spec/spec/types/Box.js
@@ -1,21 +1,22 @@
+/* globals describe, expect, it, jasmine, container */
+
 import {
   Box,
-  Gradient,
   Matrix,
   Rect,
   makeInstance as SVG
 } from '../../../src/main.js'
 import { getMethodsFor } from '../../../src/utils/methods.js'
-import { getWindow, withWindow } from '../../../src/utils/window.js'
+import { withWindow } from '../../../src/utils/window.js'
 
-const { zoom, viewbox} = getMethodsFor('viewbox')
+const { zoom, viewbox } = getMethodsFor('viewbox')
 
-const { any, objectContaining, arrayContaining } = jasmine
+const { any, objectContaining } = jasmine
 
-const getBody = () => {
-  let win = getWindow()
-  return win.document.body || win.document.documentElement
-}
+// const getBody = () => {
+//   const win = getWindow()
+//   return win.document.body || win.document.documentElement
+// }
 
 describe('Box.js', () => {
   describe('()', () => {
@@ -30,29 +31,29 @@ describe('Box.js', () => {
 
   describe('init()', () => {
     it('inits or reinits the box according to input', () => {
-      expect(new Box().init(1,2,3,4).toArray()).toEqual([1,2,3,4])
+      expect(new Box().init(1, 2, 3, 4).toArray()).toEqual([ 1, 2, 3, 4 ])
     })
 
     it('works with array input', () => {
-      expect(new Box().init([1,2,3,4]).toArray()).toEqual([1,2,3,4])
+      expect(new Box().init([ 1, 2, 3, 4 ]).toArray()).toEqual([ 1, 2, 3, 4 ])
     })
 
     it('works with 3 arguments as input', () => {
-      expect(new Box().init(1,2,3,4).toArray()).toEqual([1,2,3,4])
+      expect(new Box().init(1, 2, 3, 4).toArray()).toEqual([ 1, 2, 3, 4 ])
     })
 
     it('works with string input', () => {
-      expect(new Box().init('1,2,3,4').toArray()).toEqual([1,2,3,4])
+      expect(new Box().init('1,2,3,4').toArray()).toEqual([ 1, 2, 3, 4 ])
     })
 
-    it('creates a new box from parsed string with exponential values', function() {
+    it('creates a new box from parsed string with exponential values', function () {
       expect(new Box().init('-1.12e1 1e-2 +2e2 +.3e+4').toArray())
-        .toEqual([-11.2, 0.01, 200, 3000])
+        .toEqual([ -11.2, 0.01, 200, 3000 ])
     })
 
     it('works with object input', () => {
-      expect(new Box().init({x: 1, y: 2, width: 3, height: 4}).toArray())
-        .toEqual([1,2,3,4])
+      expect(new Box().init({ x: 1, y: 2, width: 3, height: 4 }).toArray())
+        .toEqual([ 1, 2, 3, 4 ])
     })
 
     it('calculates all derived values correctly', () => {
@@ -62,8 +63,8 @@ describe('Box.js', () => {
     })
 
     it('can handle input with left instead of x and top instead of y', () => {
-      expect(new Box().init({left: 1, top: 2, width: 3, height: 4}).toArray())
-        .toEqual([1,2,3,4])
+      expect(new Box().init({ left: 1, top: 2, width: 3, height: 4 }).toArray())
+        .toEqual([ 1, 2, 3, 4 ])
     })
   })
 
@@ -74,7 +75,7 @@ describe('Box.js', () => {
       var box3 = new Box(500, 100, 100, 100)
       var merged = box1.merge(box2).merge(box3)
 
-      expect(merged.toArray()).toEqual([50, 50, 550, 450])
+      expect(merged.toArray()).toEqual([ 50, 50, 550, 450 ])
     })
 
     it('returns a new instance', () => {
@@ -88,42 +89,52 @@ describe('Box.js', () => {
 
   describe('transform()', () => {
     it('transforms the box with given matrix', () => {
-      var box1 = new Box(50, 50, 100, 100).transform(new Matrix(1,0,0,1,20,20))
-      var box2 = new Box(50, 50, 100, 100).transform(new Matrix(2,0,0,2,0,0))
-      var box3 = new Box(-200, -200, 100, 100).transform(new Matrix(1,0,0,1,-20,-20))
+      var box1 = new Box(50, 50, 100, 100).transform(new Matrix(1, 0, 0, 1, 20, 20))
+      var box2 = new Box(50, 50, 100, 100).transform(new Matrix(2, 0, 0, 2, 0, 0))
+      var box3 = new Box(-200, -200, 100, 100).transform(new Matrix(1, 0, 0, 1, -20, -20))
 
-      expect(box1.toArray()).toEqual([70, 70, 100, 100])
-      expect(box2.toArray()).toEqual([100, 100, 200, 200])
-      expect(box3.toArray()).toEqual([-220, -220, 100, 100])
+      expect(box1.toArray()).toEqual([ 70, 70, 100, 100 ])
+      expect(box2.toArray()).toEqual([ 100, 100, 200, 200 ])
+      expect(box3.toArray()).toEqual([ -220, -220, 100, 100 ])
     })
   })
 
   describe('addOffset()', () => {
+    it('returns a new instance', () => {
+      withWindow({ pageXOffset: 50, pageYOffset: 25 }, () => {
+        const box = new Box(100, 100, 100, 100)
+        const box2 = box.addOffset()
+
+        expect(box2).toEqual(any(Box))
+        expect(box2).not.toBe(box)
+      })
+    })
+
     it('adds the current page offset to the box', () => {
-      withWindow({pageXOffset: 50, pageYOffset: 25}, () => {
+      withWindow({ pageXOffset: 50, pageYOffset: 25 }, () => {
         const box = new Box(100, 100, 100, 100).addOffset()
 
-        expect(box.toArray()).toEqual([150, 125, 100, 100])
+        expect(box.toArray()).toEqual([ 150, 125, 100, 100 ])
       })
     })
   })
 
   describe('toString()', () => {
     it('returns a string representation of the box', () => {
-      expect(new Box(1,2,3,4).toString()).toBe('1 2 3 4')
+      expect(new Box(1, 2, 3, 4).toString()).toBe('1 2 3 4')
     })
   })
 
   describe('toArray()', () => {
     it('returns an array representation of the box', () => {
-      expect(new Box(1,2,3,4).toArray()).toEqual([1,2,3,4])
+      expect(new Box(1, 2, 3, 4).toArray()).toEqual([ 1, 2, 3, 4 ])
     })
   })
 
   describe('isNulled()', () => {
     it('checks if the box consists of only zeros', () => {
       expect(new Box().isNulled()).toBe(true)
-      expect(new Box(1,2,3,4).isNulled()).toBe(false)
+      expect(new Box(1, 2, 3, 4).isNulled()).toBe(false)
     })
   })
 
@@ -134,12 +145,12 @@ describe('Box.js', () => {
         const rect = new Rect().size(100, 200).move(20, 30).addTo(canvas)
 
         expect(rect.bbox()).toEqual(any(Box))
-        expect(rect.bbox().toArray()).toEqual([20, 30, 100, 200])
+        expect(rect.bbox().toArray()).toEqual([ 20, 30, 100, 200 ])
       })
 
       it('returns the bounding box of the element even if the node is not in the dom', () => {
         const rect = new Rect().size(100, 200).move(20, 30)
-        expect(rect.bbox().toArray()).toEqual([20, 30, 100, 200])
+        expect(rect.bbox().toArray()).toEqual([ 20, 30, 100, 200 ])
       })
 
       // it('throws when it is not possible to get a bbox', () => {
@@ -152,10 +163,10 @@ describe('Box.js', () => {
       it('returns the BoundingClientRect of the element', () => {
         const canvas = SVG().addTo(container)
         const rect = new Rect().size(100, 200).move(20, 30).addTo(canvas)
-          .attr('transform', new Matrix({scale: 2, translate:[40, 50]}))
+          .attr('transform', new Matrix({ scale: 2, translate: [ 40, 50 ] }))
 
         expect(rect.rbox()).toEqual(any(Box))
-        expect(rect.rbox().toArray()).toEqual([80, 110, 200, 400])
+        expect(rect.rbox().toArray()).toEqual([ 80, 110, 200, 400 ])
       })
 
       it('throws when element is not in dom', () => {
@@ -172,7 +183,7 @@ describe('Box.js', () => {
       it('gets the viewbox of the element', () => {
         const canvas = viewbox.call(SVG().addTo(container), 10, 10, 200, 200)
         expect(viewbox.call(canvas)).toEqual(any(Box))
-        expect(viewbox.call(canvas).toArray()).toEqual([10, 10, 200, 200])
+        expect(viewbox.call(canvas).toArray()).toEqual([ 10, 10, 200, 200 ])
       })
     })
 
@@ -183,7 +194,7 @@ describe('Box.js', () => {
       })
 
       it('zooms around a point', () => {
-        const canvas = zoom.call(SVG().size(100, 50).viewbox(0, 0, 100, 50).addTo(container), 2, [0, 0])
+        const canvas = zoom.call(SVG().size(100, 50).viewbox(0, 0, 100, 50).addTo(container), 2, [ 0, 0 ])
         expect(canvas.attr('viewBox')).toEqual('0 0 50 25')
       })
 
diff --git a/spec/spec/utils/adopter.js b/spec/spec/utils/adopter.js
index 006b599..d8a7d5b 100644
--- a/spec/spec/utils/adopter.js
+++ b/spec/spec/utils/adopter.js
@@ -1,4 +1,4 @@
-const { any, createSpy, objectContaining } = jasmine
+/* globals describe, expect, it, beforeEach, afterEach, jasmine */
 
 import {
   create,
@@ -11,15 +11,19 @@ import {
   wrapWithAttrCheck,
   Rect,
   Element,
-  adopt,
-  root
+  root,
+  G,
+  Gradient,
+  Dom
 } from '../../../src/main.js'
 
-import { mockAdopt } from '../../../src/utils/adopter.js'
+import { mockAdopt, assignNewId, adopt } from '../../../src/utils/adopter.js'
 import { buildFixtures } from '../../helpers.js'
 import { globals } from '../../../src/utils/window.js'
 
-describe('Adopter.js', () => {
+const { any, createSpy, objectContaining } = jasmine
+
+describe('adopter.js', () => {
   let Node
 
   beforeEach(() => {
@@ -28,7 +32,7 @@ describe('Adopter.js', () => {
 
   describe('create()', () => {
     it('creates a node of the specified type', () => {
-      let rect = create('rect')
+      const rect = create('rect')
       expect(rect).toEqual(any(Node))
       expect(rect.nodeName).toBe('rect')
     })
@@ -47,15 +51,15 @@ describe('Adopter.js', () => {
     })
 
     it('creates a root-object when no argument given', () => {
-      let doc = makeInstance()
+      const doc = makeInstance()
 
       expect(doc).toEqual(any(getClass(root)))
       expect(doc).toEqual(any(Element))
     })
 
     it('returns a given svg.js object directly', () => {
-      let rect = new Rect()
-      let samerect = makeInstance(rect)
+      const rect = new Rect()
+      const samerect = makeInstance(rect)
       expect(rect).toBe(samerect)
     })
 
@@ -63,13 +67,19 @@ describe('Adopter.js', () => {
       makeInstance('<rect width="200px">')
 
       expect(adoptSpy).toHaveBeenCalledWith(any(Node))
-      expect(adoptSpy).toHaveBeenCalledWith(objectContaining({nodeName: 'rect'}))
+      expect(adoptSpy).toHaveBeenCalledWith(objectContaining({ nodeName: 'rect' }))
+    })
+
+    it('creates an element in the html namespace from passed html string', () => {
+      makeInstance('<div>', true)
+      expect(adoptSpy).toHaveBeenCalledWith(any(Node))
+      expect(adoptSpy).toHaveBeenCalledWith(objectContaining({ nodeName: 'DIV', namespaceURI: 'http://www.w3.org/1999/xhtml' }))
     })
 
     it('searches for element in dom if selector given', () => {
       buildFixtures()
 
-      let path = globals.window.document.getElementById('lineAB')
+      const path = globals.window.document.getElementById('lineAB')
 
       makeInstance('#lineAB')
       makeInstance('#doesNotExist')
@@ -82,20 +92,53 @@ describe('Adopter.js', () => {
       makeInstance(create('rect'))
 
       expect(adoptSpy).toHaveBeenCalledWith(any(Node))
-      expect(adoptSpy).toHaveBeenCalledWith(objectContaining({nodeName: 'rect'}))
+      expect(adoptSpy).toHaveBeenCalledWith(objectContaining({ nodeName: 'rect' }))
+    })
+  })
+
+  describe('adopt()', () => {
+    it('returns null of passed node is null', () => {
+      expect(adopt(null)).toBe(null)
+    })
+
+    it('returns instance from node if present', () => {
+      const rect = new Rect()
+      expect(adopt(rect.node)).toBe(rect)
+    })
+
+    it('creates instance when node without instance is passed', () => {
+      const rect = new Rect()
+      const node = rect.node
+      delete node.instance
+      expect(adopt(node)).toEqual(any(Rect))
+      expect(adopt(node)).not.toBe(rect)
+    })
+
+    it('creates instance when node without instance is passed with gradients', () => {
+      const gradient = new Gradient('linear')
+      const node = gradient.node
+      delete node.instance
+      expect(adopt(node)).toEqual(any(Gradient))
+      expect(adopt(node).type).toBe('linearGradient')
+      expect(adopt(node)).not.toBe(gradient)
+    })
+
+    it('creates Dom instances for unknown nodes', () => {
+      const div = document.createElement('div')
+      expect(adopt(div)).toEqual(any(Dom))
     })
   })
 
   describe('nodeOrNew()', () => {
     it('creates a node of node argument is null', () => {
-      let rect = nodeOrNew('rect', null)
+      const rect = nodeOrNew('rect', null)
       expect(rect).toEqual(any(Node))
       expect(rect.nodeName).toBe('rect')
     })
 
     it('returns the node if one is passed', () => {
-      let div = globals.window.document.createElement('div')
-      let node = nodeOrNew('something', div)
+      const div = globals.window.document.createElement('div')
+      const node = nodeOrNew('something', div)
 
       // jasmine chucks on this when using the node directly
       expect(node.outerHTML).toBe(div.outerHTML)
@@ -104,9 +147,9 @@ describe('Adopter.js', () => {
 
   describe('register()/getClass()', () => {
     it('sets and gets a class from the class register', () => {
-      const a = class {}
-      register(a)
-      expect(getClass('a')).toBe(a)
+      const A = class {}
+      register(A)
+      expect(getClass('A')).toBe(A)
     })
   })
 
@@ -116,41 +159,63 @@ describe('Adopter.js', () => {
     })
   })
 
+  describe('assignNewId()', () => {
+    it('assigns a new id if id is present on element', () => {
+      const rect = new Rect().id('foo')
+      assignNewId(rect.node)
+      expect(rect.id()).not.toBe('foo')
+    })
+
+    it('does not set id if no id is present on element', () => {
+      const rect = new Rect()
+      assignNewId(rect.node)
+      expect(rect.attr('id')).toBe(undefined)
+    })
+
+    it('recursively sets new ids on children', () => {
+      const group = new G().id('foo')
+      const rect = group.rect(100, 100).id('bar')
+      assignNewId(group.node)
+      expect(group.id()).not.toBe('foo')
+      expect(rect.id()).not.toBe('bar')
+    })
+  })
+
   describe('extend()', () => {
     it('adds all functions in the given object to the target object', () => {
-      const a = class {}
+      const A = class {}
 
-      extend(a, {
+      extend(A, {
         test () { this.prop = 'test'; return this }
       })
 
-      expect(typeof a.prototype.test).toBe('function')
-      expect(new a().test().prop).toBe('test')
+      expect(typeof A.prototype.test).toBe('function')
+      expect(new A().test().prop).toBe('test')
     })
     it('accepts and extend multiple modules at once', () => {
-      const a = class {}
-      const b = class {}
-      const c = class {}
+      const A = class {}
+      const B = class {}
+      const C = class {}
 
-      extend([a, b, c], {
+      extend([ A, B, C ], {
         test () { this.prop = 'test'; return this }
       })
 
-      expect(typeof a.prototype.test).toBe('function')
-      expect(new a().test().prop).toBe('test')
-      expect(typeof b.prototype.test).toBe('function')
-      expect(new b().test().prop).toBe('test')
-      expect(typeof c.prototype.test).toBe('function')
-      expect(new c().test().prop).toBe('test')
+      expect(typeof A.prototype.test).toBe('function')
+      expect(new A().test().prop).toBe('test')
+      expect(typeof B.prototype.test).toBe('function')
+      expect(new B().test().prop).toBe('test')
+      expect(typeof C.prototype.test).toBe('function')
+      expect(new C().test().prop).toBe('test')
     })
   })
 
   describe('wrapWithAttrCheck()', () => {
-    it('wraps a function so that it calles an attr function if an object is passed', () => {
+    it('wraps a function so that it calls an attr function if an object is passed', () => {
       const attrSpy = createSpy('attr')
 
-      const a = class {}
-      extend(a, {
+      const A = class {}
+      extend(A, {
         test: wrapWithAttrCheck(function () {
           this.prop = 'test'; return this
         }),
@@ -159,9 +224,9 @@ describe('Adopter.js', () => {
 
       const obj = {}
 
-      expect(new a().test().prop).toBe('test')
+      expect(new A().test().prop).toBe('test')
       expect(attrSpy).not.toHaveBeenCalled()
-      new a().test(obj)
+      new A().test(obj)
       expect(attrSpy).toHaveBeenCalledWith(obj)
     })
   })
diff --git a/spec/spec/utils/utils.js b/spec/spec/utils/utils.js
new file mode 100644
index 0000000..5606222
--- /dev/null
+++ b/spec/spec/utils/utils.js
@@ -0,0 +1,194 @@
+/* globals describe, expect, it, beforeEach, jasmine */
+
+import {
+  map,
+  filter,
+  radians,
+  degrees,
+  camelCase,
+  unCamelCase,
+  capitalize,
+  proportionalSize,
+  getOrigin
+} from '../../../src/utils/utils.js'
+
+const { any } = jasmine
+
+describe('utils.js', function () {
+  describe('map()', function () {
+    var arr1
+    var arr2
+
+    beforeEach(function () {
+      arr1 = [ 1, 2, 3, 4 ]
+      arr2 = map(arr1, function (el) {
+        return el * 2
+      })
+    })
+
+    it('returns a new array', function () {
+      expect(arr2).toEqual(any(Array))
+      expect(arr2).not.toBe(arr1)
+    })
+
+    it('executes a function on every element and returns the result in a new array', function () {
+      expect(arr2).toEqual([ 2, 4, 6, 8 ])
+    })
+  })
+
+  describe('filter()', function () {
+    var arr1
+    var arr2
+
+    beforeEach(function () {
+      arr1 = [ 1, 2, 3, 4 ]
+      arr2 = filter(arr1, function (el) {
+        return el % 2 === 0
+      })
+    })
+
+    it('returns a new array', function () {
+      expect(arr2).toEqual(any(Array))
+      expect(arr2).not.toBe(arr1)
+    })
+
+    it('filters elements by function', function () {
+      expect(arr2).toEqual([ 2, 4 ])
+    })
+  })
+
+  describe('radians()', function () {
+    it('converts degrees to radians', function () {
+      expect(radians(270)).toBe(1.5 * Math.PI)
+      expect(radians(90)).toBe(Math.PI / 2)
+    })
+
+    it('caps at 360 degrees', function () {
+      expect(radians(360)).toBe(0)
+      expect(radians(360 + 180)).toBe(Math.PI)
+    })
+  })
+
+  describe('degrees()', function () {
+    it('converts radians to degreens', function () {
+      expect(degrees(1.5 * Math.PI)).toBe(270)
+      expect(degrees(Math.PI / 2)).toBe(90)
+    })
+
+    it('caps at 2 PI', function () {
+      expect(degrees(2 * Math.PI)).toBe(0)
+      expect(degrees(3 * Math.PI)).toBe(180)
+    })
+  })
+
+  describe('camelCase()', function () {
+    it('converts dash-case and PascalCase to camelCase', function () {
+      var dash1 = 'dash-1'
+      var dashTwo = 'dash-two'
+      var camelOne = 'camelOne'
+      var pascalOne = 'PascalOne'
+      var mixOne = 'mix-One'
+
+      expect(camelCase(dash1)).toBe('dash1')
+      expect(camelCase(dashTwo)).toBe('dashTwo')
+      expect(camelCase(camelOne)).toBe('camelone')
+      expect(camelCase(pascalOne)).toBe('pascalone')
+      expect(camelCase(mixOne)).toBe('mixOne')
+    })
+  })
+
+  describe('unCamelCase()', function () {
+    it('converts camelCase to dash-case', function () {
+      var dash1 = 'dash-1'
+      var dashTwo = 'dash-two'
+      var camelOne = 'camelOne'
+      var pascalOne = 'PascalOne'
+
+      expect(unCamelCase(dash1)).toBe('dash-1')
+      expect(unCamelCase(dashTwo)).toBe('dash-two')
+      expect(unCamelCase(camelOne)).toBe('camel-one')
+      expect(unCamelCase(pascalOne)).toBe('-pascal-one')
+    })
+  })
+
+  describe('capitalize()', function () {
+    it('capitalizes the first letter', function () {
+      var dash1 = 'dash-1'
+      var dashTwo = 'dash-two'
+      var camelOne = 'camelOne'
+      var pascalOne = 'PascalOne'
+
+      expect(capitalize(dash1)).toBe('Dash-1')
+      expect(capitalize(dashTwo)).toBe('Dash-two')
+      expect(capitalize(camelOne)).toBe('CamelOne')
+      expect(capitalize(pascalOne)).toBe('PascalOne')
+    })
+  })
+
+  describe('proportionalSize()', function () {
+    var box = { width: 150, height: 100 }
+    var el = { bbox: () => ({ width: 200, height: 100 }) }
+
+    it('calculates height proportionally', function () {
+      expect(proportionalSize(el, 400, null)).toEqual({ width: 400, height: 200 })
+    })
+
+    it('calculates width proportionally', function () {
+      expect(proportionalSize(el, null, 200)).toEqual({ width: 400, height: 200 })
+    })
+
+    it('prefers passed box over element', function () {
+      expect(proportionalSize(el, 300, null, box)).toEqual({ width: 300, height: 200 })
+      expect(proportionalSize(el, null, 200, box)).toEqual({ width: 300, height: 200 })
+    })
+  })
+
+  describe('getOrigin()', function () {
+    var el = { bbox: () => ({ width: 200, height: 100, x: 300, y: 400 }) }
+
+    it('gets the origin from [ox, oy]', function () {
+      var origin = { origin: [ 10, 20 ] }
+      expect(getOrigin(origin, el)).toEqual([ 10, 20 ])
+    })
+
+    it('gets the origin from [ox, oy] as strings', function () {
+      var origin = { origin: [ 'center', 'top' ] }
+      expect(getOrigin(origin, el)).toEqual([ 400, 400 ])
+    })
+
+    it('gets the origin from {x, y}', function () {
+      var origin = { origin: { x: 10, y: 20 } }
+      expect(getOrigin(origin, el)).toEqual([ 10, 20 ])
+    })
+
+    it('gets the origin from {ox, oy}', function () {
+      var origin = { ox: 10, oy: 20 }
+      expect(getOrigin(origin, el)).toEqual([ 10, 20 ])
+    })
+
+    it('gets the origin from {ox, oy} as strings', function () {
+      var origin = { ox: 'center', oy: 'top' }
+      expect(getOrigin(origin, el)).toEqual([ 400, 400 ])
+    })
+
+    it('gets the origin from {originX, originY}', function () {
+      var origin = { originX: 10, originY: 20 }
+      expect(getOrigin(origin, el)).toEqual([ 10, 20 ])
+    })
+
+    it('gets the origin from {originX, originY} as strings', function () {
+      var origin = { originX: 'center', originY: 'top' }
+      expect(getOrigin(origin, el)).toEqual([ 400, 400 ])
+    })
+
+    it('gets the origin from string', function () {
+      var origin = { origin: 'center top' }
+      expect(getOrigin(origin, el)).toEqual([ 400, 400 ])
+    })
+
+    it('gets the origin from number', function () {
+      var origin = { origin: 5 }
+      expect(getOrigin(origin, el)).toEqual([ 5, 5 ])
+    })
+  })
+})
diff --git a/src/animation/Runner.js b/src/animation/Runner.js
index 8c0aca5..8c56423 100644
--- a/src/animation/Runner.js
+++ b/src/animation/Runner.js
@@ -681,7 +681,7 @@ extend(Runner, {
   },
 
   zoom (level, point) {
-    if (this._tryRetarget('zoom', to, point)) return this
+    if (this._tryRetarget('zoom', level, point)) return this
 
     var morpher = new Morphable(this._stepper).to(new SVGNumber(level))
 
diff --git a/src/elements/A.js b/src/elements/A.js
index 4e7297b..6f9bec2 100644
--- a/src/elements/A.js
+++ b/src/elements/A.js
@@ -4,8 +4,8 @@ import { xlink } from '../modules/core/namespaces.js'
 import Container from './Container.js'
 
 export default class A extends Container {
-  constructor (node) {
-    super(nodeOrNew('a', node), node)
+  constructor (node, attrs = node) {
+    super(nodeOrNew('a', node), attrs)
   }
 
   // Link url
@@ -27,9 +27,31 @@ registerMethods({
     })
   },
   Element: {
-    // Create a hyperlink element
-    linkTo: function (url) {
-      var link = new A()
+    unlink () {
+      var link = this.linker()
+
+      if (!link) return this
+
+      var parent = link.parent()
+
+      if (!parent) {
+        return this.remove()
+      }
+
+      var index = parent.index(link)
+      parent.add(this, index)
+
+      link.remove()
+      return this
+    },
+    linkTo (url) {
+      // reuse old link if possible
+      var link = this.linker()
+
+      if (!link) {
+        link = new A()
+        this.wrap(link)
+      }
 
       if (typeof url === 'function') {
         url.call(link, link)
@@ -37,7 +59,15 @@ registerMethods({
         link.to(url)
       }
 
-      return this.parent().put(link).put(this)
+      return this
+    },
+    linker () {
+      var link = this.parent()
+      if (link && link.node.nodeName.toLowerCase() === 'a') {
+        return link
+      }
+
+      return null
     }
   }
 })
diff --git a/src/elements/Circle.js b/src/elements/Circle.js
index 29683c9..701b5e1 100644
--- a/src/elements/Circle.js
+++ b/src/elements/Circle.js
@@ -10,8 +10,8 @@ import SVGNumber from '../types/SVGNumber.js'
 import Shape from './Shape.js'
 
 export default class Circle extends Shape {
-  constructor (node) {
-    super(nodeOrNew('circle', node), node)
+  constructor (node, attrs = node) {
+    super(nodeOrNew('circle', node), attrs)
   }
 
   radius (r) {
diff --git a/src/elements/ClipPath.js b/src/elements/ClipPath.js
index 0a87bed..55f9c3d 100644
--- a/src/elements/ClipPath.js
+++ b/src/elements/ClipPath.js
@@ -4,8 +4,8 @@ import Container from './Container.js'
 import baseFind from '../modules/core/selector.js'
 
 export default class ClipPath extends Container {
-  constructor (node) {
-    super(nodeOrNew('clipPath', node), node)
+  constructor (node, attrs = node) {
+    super(nodeOrNew('clipPath', node), attrs)
   }
 
   // Unclip all clipped elements and remove itself
diff --git a/src/elements/Defs.js b/src/elements/Defs.js
index 1bd3bd4..7491ba0 100644
--- a/src/elements/Defs.js
+++ b/src/elements/Defs.js
@@ -2,8 +2,8 @@ import { nodeOrNew, register } from '../utils/adopter.js'
 import Container from './Container.js'
 
 export default class Defs extends Container {
-  constructor (node) {
-    super(nodeOrNew('defs', node), node)
+  constructor (node, attrs = node) {
+    super(nodeOrNew('defs', node), attrs)
   }
 
   flatten () {
diff --git a/src/elements/Dom.js b/src/elements/Dom.js
index 0c4ecb3..6fd1b1b 100644
--- a/src/elements/Dom.js
+++ b/src/elements/Dom.js
@@ -194,22 +194,15 @@ export default class Dom extends EventTarget {
     return element
   }
 
-  round (precision = 2, map) {
+  round (precision = 2, map = null) {
     const factor = 10 ** precision
-    const attrs = this.attr()
+    const attrs = this.attr(map)
 
-    // If we have no map, build one from attrs
-    if (!map) {
-      map = Object.keys(attrs)
+    for (const i in attrs) {
+      attrs[i] = Math.round(attrs[i] * factor) / factor
     }
 
-    // Holds rounded attributes
-    const newAttrs = {}
-    map.forEach((key) => {
-      newAttrs[key] = Math.round(attrs[key] * factor) / factor
-    })
-
-    this.attr(newAttrs)
+    this.attr(attrs)
     return this
   }
 
@@ -302,6 +295,17 @@ export default class Dom extends EventTarget {
     return this
   }
 
+  wrap (node) {
+    const parent = this.parent()
+
+    if (!parent) {
+      return node.put(this)
+    }
+
+    const position = parent.index(this)
+    return parent.put(node, position).put(this)
+  }
+
   // write svgjs data to the dom
   writeDataToDom () {
     // dump variables recursively
diff --git a/src/elements/Element.js b/src/elements/Element.js
index 3bd97de..56dbcf3 100644
--- a/src/elements/Element.js
+++ b/src/elements/Element.js
@@ -38,7 +38,9 @@ export default class Element extends Dom {
 
   // Move by center over x-axis
   cx (x) {
-    return x == null ? this.x() + this.width() / 2 : this.x(x - this.width() / 2)
+    return x == null
+      ? this.x() + this.width() / 2
+      : this.x(x - this.width() / 2)
   }
 
   // Move by center over y-axis
@@ -99,17 +101,16 @@ export default class Element extends Dom {
   }
 
   // return array of all ancestors of given type up to the root svg
-  parents (until = globals.document) {
+  parents (until = this.root()) {
     until = makeInstance(until)
     const parents = new List()
     let parent = this
 
-    while (
-      (parent = parent.parent())
-      && parent.node !== until.node
-      && parent.node !== globals.document
-    ) {
+    while ((parent = parent.parent()) && parent.node !== globals.document) {
       parents.push(parent)
+      if (parent.node === until.node) {
+        break
+      }
     }
 
     return parents
diff --git a/src/elements/Ellipse.js b/src/elements/Ellipse.js
index 60660e7..b993687 100644
--- a/src/elements/Ellipse.js
+++ b/src/elements/Ellipse.js
@@ -11,8 +11,8 @@ import Shape from './Shape.js'
 import * as circled from '../modules/core/circled.js'
 
 export default class Ellipse extends Shape {
-  constructor (node) {
-    super(nodeOrNew('ellipse', node), node)
+  constructor (node, attrs = node) {
+    super(nodeOrNew('ellipse', node), attrs)
   }
 
   size (width, height) {
diff --git a/src/elements/ForeignObject.js b/src/elements/ForeignObject.js
index 4e6aae4..0a417b0 100644
--- a/src/elements/ForeignObject.js
+++ b/src/elements/ForeignObject.js
@@ -3,8 +3,8 @@ import { registerMethods } from '../utils/methods.js'
 import Element from './Element.js'
 
 export default class ForeignObject extends Element {
-  constructor (node) {
-    super(nodeOrNew('foreignObject', node), node)
+  constructor (node, attrs = node) {
+    super(nodeOrNew('foreignObject', node), attrs)
   }
 }
 
diff --git a/src/elements/G.js b/src/elements/G.js
index d922a41..7677b92 100644
--- a/src/elements/G.js
+++ b/src/elements/G.js
@@ -6,8 +6,8 @@ import Matrix from '../types/Matrix.js'
 import Point from '../types/Point.js'
 
 export default class G extends Container {
-  constructor (node) {
-    super(nodeOrNew('g', node), node)
+  constructor (node, attrs = node) {
+    super(nodeOrNew('g', node), attrs)
   }
 
   x (x, box = this.bbox()) {
diff --git a/src/elements/Image.js b/src/elements/Image.js
index fdd3d83..347269c 100644
--- a/src/elements/Image.js
+++ b/src/elements/Image.js
@@ -9,8 +9,8 @@ import Shape from './Shape.js'
 import { globals } from '../utils/window.js'
 
 export default class Image extends Shape {
-  constructor (node) {
-    super(nodeOrNew('image', node), node)
+  constructor (node, attrs = node) {
+    super(nodeOrNew('image', node), attrs)
   }
 
   // (re)load image
diff --git a/src/elements/Line.js b/src/elements/Line.js
index 0b7534b..146aa45 100644
--- a/src/elements/Line.js
+++ b/src/elements/Line.js
@@ -12,8 +12,8 @@ import * as pointed from '../modules/core/pointed.js'
 
 export default class Line extends Shape {
   // Initialize node
-  constructor (node) {
-    super(nodeOrNew('line', node), node)
+  constructor (node, attrs = node) {
+    super(nodeOrNew('line', node), attrs)
   }
 
   // Get array
diff --git a/src/elements/Marker.js b/src/elements/Marker.js
index d6a599d..b3077b1 100644
--- a/src/elements/Marker.js
+++ b/src/elements/Marker.js
@@ -4,8 +4,8 @@ import Container from './Container.js'
 
 export default class Marker extends Container {
   // Initialize node
-  constructor (node) {
-    super(nodeOrNew('marker', node), node)
+  constructor (node, attrs = node) {
+    super(nodeOrNew('marker', node), attrs)
   }
 
   // Set width of element
@@ -18,6 +18,10 @@ export default class Marker extends Container {
     return this.attr('markerHeight', height)
   }
 
+  orient (orient) {
+    return this.attr('orient', orient)
+  }
+
   // Set marker refX and refY
   ref (x, y) {
     return this.attr('refX', x).attr('refY', y)
diff --git a/src/elements/Mask.js b/src/elements/Mask.js
index 178dcb5..64caca5 100644
--- a/src/elements/Mask.js
+++ b/src/elements/Mask.js
@@ -5,8 +5,8 @@ import baseFind from '../modules/core/selector.js'
 
 export default class Mask extends Container {
   // Initialize node
-  constructor (node) {
-    super(nodeOrNew('mask', node), node)
+  constructor (node, attrs = node) {
+    super(nodeOrNew('mask', node), attrs)
   }
 
   // Unmask all masked elements and remove itself
diff --git a/src/elements/Path.js b/src/elements/Path.js
index 4549506..8f37319 100644
--- a/src/elements/Path.js
+++ b/src/elements/Path.js
@@ -7,8 +7,8 @@ import baseFind from '../modules/core/selector.js'
 
 export default class Path extends Shape {
   // Initialize node
-  constructor (node) {
-    super(nodeOrNew('path', node), node)
+  constructor (node, attrs = node) {
+    super(nodeOrNew('path', node), attrs)
   }
 
   // Get array
diff --git a/src/elements/Pattern.js b/src/elements/Pattern.js
index 99e8ded..72b7c59 100644
--- a/src/elements/Pattern.js
+++ b/src/elements/Pattern.js
@@ -6,8 +6,8 @@ import baseFind from '../modules/core/selector.js'
 
 export default class Pattern extends Container {
   // Initialize node
-  constructor (node) {
-    super(nodeOrNew('pattern', node), node)
+  constructor (node, attrs = node) {
+    super(nodeOrNew('pattern', node), attrs)
   }
 
   // Return the fill id
diff --git a/src/elements/Polygon.js b/src/elements/Polygon.js
index 5984689..0c99aa7 100644
--- a/src/elements/Polygon.js
+++ b/src/elements/Polygon.js
@@ -12,8 +12,8 @@ import * as poly from '../modules/core/poly.js'
 
 export default class Polygon extends Shape {
   // Initialize node
-  constructor (node) {
-    super(nodeOrNew('polygon', node), node)
+  constructor (node, attrs = node) {
+    super(nodeOrNew('polygon', node), attrs)
   }
 }
 
diff --git a/src/elements/Polyline.js b/src/elements/Polyline.js
index 94a767c..e390da3 100644
--- a/src/elements/Polyline.js
+++ b/src/elements/Polyline.js
@@ -12,8 +12,8 @@ import * as poly from '../modules/core/poly.js'
 
 export default class Polyline extends Shape {
   // Initialize node
-  constructor (node) {
-    super(nodeOrNew('polyline', node), node)
+  constructor (node, attrs = node) {
+    super(nodeOrNew('polyline', node), attrs)
   }
 }
 
diff --git a/src/elements/Rect.js b/src/elements/Rect.js
index 149ae48..0ed85fc 100644
--- a/src/elements/Rect.js
+++ b/src/elements/Rect.js
@@ -10,8 +10,8 @@ import Shape from './Shape.js'
 
 export default class Rect extends Shape {
   // Initialize node
-  constructor (node) {
-    super(nodeOrNew('rect', node), node)
+  constructor (node, attrs = node) {
+    super(nodeOrNew('rect', node), attrs)
   }
 }
 
diff --git a/src/elements/Stop.js b/src/elements/Stop.js
index 570dda7..d258b86 100644
--- a/src/elements/Stop.js
+++ b/src/elements/Stop.js
@@ -3,8 +3,8 @@ import Element from './Element.js'
 import SVGNumber from '../types/SVGNumber.js'
 
 export default class Stop extends Element {
-  constructor (node) {
-    super(nodeOrNew('stop', node), node)
+  constructor (node, attrs = node) {
+    super(nodeOrNew('stop', node), attrs)
   }
 
   // add color stops
diff --git a/src/elements/Style.js b/src/elements/Style.js
index b878189..0b7d952 100644
--- a/src/elements/Style.js
+++ b/src/elements/Style.js
@@ -19,8 +19,8 @@ function cssRule (selector, rule) {
 }
 
 export default class Style extends Element {
-  constructor (node) {
-    super(nodeOrNew('style', node), node)
+  constructor (node, attrs = node) {
+    super(nodeOrNew('style', node), attrs)
   }
 
   addText (w = '') {
diff --git a/src/elements/Svg.js b/src/elements/Svg.js
index f96a5f8..7cec826 100644
--- a/src/elements/Svg.js
+++ b/src/elements/Svg.js
@@ -11,8 +11,8 @@ import Defs from './Defs.js'
 import { globals } from '../utils/window.js'
 
 export default class Svg extends Container {
-  constructor (node) {
-    super(nodeOrNew('svg', node), node)
+  constructor (node, attrs = node) {
+    super(nodeOrNew('svg', node), attrs)
     this.namespace()
   }
 
diff --git a/src/elements/Symbol.js b/src/elements/Symbol.js
index 3dd48d7..d2a98ac 100644
--- a/src/elements/Symbol.js
+++ b/src/elements/Symbol.js
@@ -4,8 +4,8 @@ import Container from './Container.js'
 
 export default class Symbol extends Container {
   // Initialize node
-  constructor (node) {
-    super(nodeOrNew('symbol', node), node)
+  constructor (node, attrs = node) {
+    super(nodeOrNew('symbol', node), attrs)
   }
 }
 
diff --git a/src/elements/Text.js b/src/elements/Text.js
index b3fb8e0..2951c2f 100644
--- a/src/elements/Text.js
+++ b/src/elements/Text.js
@@ -13,60 +13,14 @@ import * as textable from '../modules/core/textable.js'
 
 export default class Text extends Shape {
   // Initialize node
-  constructor (node) {
-    super(nodeOrNew('text', node), node)
+  constructor (node, attrs = node) {
+    super(nodeOrNew('text', node), attrs)
 
     this.dom.leading = new SVGNumber(1.3) // store leading value for rebuilding
     this._rebuild = true // enable automatic updating of dy values
     this._build = false // disable build mode for adding multiple lines
   }
 
-  // Move over x-axis
-  // Text is moved its bounding box
-  // text-anchor does NOT matter
-  x (x, box = this.bbox()) {
-    if (x == null) {
-      return box.x
-    }
-
-    return this.attr('x', this.attr('x') + x - box.x)
-  }
-
-  // Move over y-axis
-  y (y, box = this.bbox()) {
-    if (y == null) {
-      return box.y
-    }
-
-    return this.attr('y', this.attr('y') + y - box.y)
-  }
-
-  move (x, y, box = this.bbox()) {
-    return this.x(x, box).y(y, box)
-  }
-
-  // Move center over x-axis
-  cx (x, box = this.bbox()) {
-    if (x == null) {
-      return box.cx
-    }
-
-    return this.attr('x', this.attr('x') + x - box.cx)
-  }
-
-  // Move center over y-axis
-  cy (y, box = this.bbox()) {
-    if (y == null) {
-      return box.cy
-    }
-
-    return this.attr('y', this.attr('y') + y - box.cy)
-  }
-
-  center (x, y, box = this.bbox()) {
-    return this.cx(x, box).cy(y, box)
-  }
-
   // Set the text content
   text (text) {
     // act as getter
@@ -102,11 +56,11 @@ export default class Text extends Shape {
       text.call(this, this)
     } else {
       // store text and make sure text is not blank
-      text = text.split('\n')
+      text = (text + '').split('\n')
 
       // build new lines
       for (var j = 0, jl = text.length; j < jl; j++) {
-        this.tspan(text[j]).newLine()
+        this.newLine(text[j])
       }
     }
 
@@ -140,9 +94,10 @@ export default class Text extends Shape {
       var blankLineOffset = 0
       var leading = this.dom.leading
 
-      this.each(function () {
+      this.each(function (i) {
         var fontSize = globals.window.getComputedStyle(this.node)
           .getPropertyValue('font-size')
+
         var dy = leading * new SVGNumber(fontSize)
 
         if (this.dom.newLined) {
@@ -151,7 +106,7 @@ export default class Text extends Shape {
           if (this.text() === '\n') {
             blankLineOffset += dy
           } else {
-            this.attr('dy', dy + blankLineOffset)
+            this.attr('dy', i ? dy + blankLineOffset : 0)
             blankLineOffset = 0
           }
         }
@@ -163,12 +118,6 @@ export default class Text extends Shape {
     return this
   }
 
-  // Enable / disable build mode
-  build (build) {
-    this._build = !!build
-    return this
-  }
-
   // overwrite method from parent to set data properly
   setData (o) {
     this.dom = o
@@ -182,12 +131,12 @@ extend(Text, textable)
 registerMethods({
   Container: {
     // Create text element
-    text: wrapWithAttrCheck(function (text) {
+    text: wrapWithAttrCheck(function (text = '') {
       return this.put(new Text()).text(text)
     }),
 
     // Create plain text element
-    plain: wrapWithAttrCheck(function (text) {
+    plain: wrapWithAttrCheck(function (text = '') {
       return this.put(new Text()).plain(text)
     })
   }
diff --git a/src/elements/TextPath.js b/src/elements/TextPath.js
index f26b251..fde8131 100644
--- a/src/elements/TextPath.js
+++ b/src/elements/TextPath.js
@@ -8,8 +8,8 @@ import baseFind from '../modules/core/selector.js'
 
 export default class TextPath extends Text {
   // Initialize node
-  constructor (node) {
-    super(nodeOrNew('textPath', node), node)
+  constructor (node, attrs = node) {
+    super(nodeOrNew('textPath', node), attrs)
   }
 
   // return the array of the path track element
@@ -92,7 +92,7 @@ registerMethods({
     }),
 
     targets () {
-      return baseFind('svg [href*="' + this.id() + '"]')
+      return baseFind('svg [*|href*="' + this.id() + '"]')
     }
   }
 })
diff --git a/src/elements/Tspan.js b/src/elements/Tspan.js
index 11f7fc3..00934ab 100644
--- a/src/elements/Tspan.js
+++ b/src/elements/Tspan.js
@@ -7,20 +7,28 @@ import {
 import { globals } from '../utils/window.js'
 import { registerMethods } from '../utils/methods.js'
 import SVGNumber from '../types/SVGNumber.js'
+import Shape from './Shape.js'
 import Text from './Text.js'
 import * as textable from '../modules/core/textable.js'
 
-export default class Tspan extends Text {
+export default class Tspan extends Shape {
   // Initialize node
-  constructor (node) {
-    super(nodeOrNew('tspan', node), node)
+  constructor (node, attrs = node) {
+    super(nodeOrNew('tspan', node), attrs)
+    this._build = false // disable build mode for adding multiple lines
   }
 
   // Set text content
   text (text) {
     if (text == null) return this.node.textContent + (this.dom.newLined ? '\n' : '')
 
-    typeof text === 'function' ? text.call(this, this) : this.plain(text)
+    if (typeof text === 'function') {
+      this.clear().build(true)
+      text.call(this, this)
+      this.build(false)
+    } else {
+      this.plain(text)
+    }
 
     return this
   }
@@ -35,32 +43,27 @@ export default class Tspan extends Text {
     return this.attr('dy', dy)
   }
 
-  x (x) {
-    return this.attr('x', x)
-  }
-
-  y (y) {
-    return this.attr('x', y)
-  }
-
-  move (x, y) {
-    return this.x(x).y(y)
-  }
-
   // Create new line
   newLine () {
-    // fetch text parent
-    var t = this.parent(Text)
-
     // mark new line
     this.dom.newLined = true
 
+    // fetch parent
+    var text = this.parent()
+
+    // early return in case we are not in a text element
+    if (!(text instanceof Text)) {
+      return this
+    }
+
+    var i = text.index(this)
+
     var fontSize = globals.window.getComputedStyle(this.node)
       .getPropertyValue('font-size')
-    var dy = t.dom.leading * new SVGNumber(fontSize)
+    var dy = text.dom.leading * new SVGNumber(fontSize)
 
     // apply new position
-    return this.dy(dy).attr('x', t.x())
+    return this.dy(i ? dy : 0).attr('x', text.x())
   }
 }
 
@@ -68,7 +71,7 @@ extend(Tspan, textable)
 
 registerMethods({
   Tspan: {
-    tspan: wrapWithAttrCheck(function (text) {
+    tspan: wrapWithAttrCheck(function (text = '') {
       var tspan = new Tspan()
 
       // clear if build mode is disabled
@@ -77,10 +80,13 @@ registerMethods({
       }
 
       // add new tspan
-      this.node.appendChild(tspan.node)
-
-      return tspan.text(text)
+      return this.put(tspan).text(text)
     })
+  },
+  Text: {
+    newLine: function (text = '') {
+      return this.tspan(text).newLine()
+    }
   }
 })
 
diff --git a/src/elements/Use.js b/src/elements/Use.js
index 99fb8ec..30d9436 100644
--- a/src/elements/Use.js
+++ b/src/elements/Use.js
@@ -4,12 +4,12 @@ import { xlink } from '../modules/core/namespaces.js'
 import Shape from './Shape.js'
 
 export default class Use extends Shape {
-  constructor (node) {
-    super(nodeOrNew('use', node), node)
+  constructor (node, attrs = node) {
+    super(nodeOrNew('use', node), attrs)
   }
 
   // Use element as a reference
-  element (element, file) {
+  use (element, file) {
     // Set lined element
     return this.attr('href', (file || '') + '#' + element, xlink)
   }
@@ -19,7 +19,7 @@ registerMethods({
   Container: {
     // Create a use element
     use: wrapWithAttrCheck(function (element, file) {
-      return this.put(new Use()).element(element, file)
+      return this.put(new Use()).use(element, file)
     })
   }
 })
diff --git a/src/modules/core/event.js b/src/modules/core/event.js
index 2cf9b1e..976e13d 100644
--- a/src/modules/core/event.js
+++ b/src/modules/core/event.js
@@ -3,9 +3,9 @@ import { makeInstance } from '../../utils/adopter.js'
 import { globals } from '../../utils/window.js'
 
 let listenerId = 0
-const windowEvents = {}
+export const windowEvents = {}
 
-function getEvents (instance) {
+export function getEvents (instance) {
   let n = instance.getEventHolder()
 
   // We dont want to save events in global space
@@ -14,12 +14,13 @@ function getEvents (instance) {
   return n.events
 }
 
-function getEventTarget (instance) {
+export function getEventTarget (instance) {
   return instance.getEventTarget()
 }
 
-function clearEvents (instance) {
-  const n = instance.getEventHolder()
+export function clearEvents (instance) {
+  let n = instance.getEventHolder()
+  if (n === globals.window) n = windowEvents
   if (n.events) n.events = {}
 }
 
@@ -120,14 +121,14 @@ export function off (node, events, listener, options) {
   })
 }
 
-export function dispatch (node, event, data) {
+export function dispatch (node, event, data, options) {
   var n = getEventTarget(node)
 
   // Dispatch event
   if (event instanceof globals.window.Event) {
     n.dispatchEvent(event)
   } else {
-    event = new globals.window.CustomEvent(event, { detail: data, cancelable: true })
+    event = new globals.window.CustomEvent(event, { detail: data, cancelable: true, ...options })
     n.dispatchEvent(event)
   }
   return event
diff --git a/src/modules/core/textable.js b/src/modules/core/textable.js
index 55df7c6..28b13cb 100644
--- a/src/modules/core/textable.js
+++ b/src/modules/core/textable.js
@@ -17,3 +17,67 @@ export function plain (text) {
 export function length () {
   return this.node.getComputedTextLength()
 }
+
+// Move over x-axis
+// Text is moved by its bounding box
+// text-anchor does NOT matter
+export function x (x, box = this.bbox()) {
+  if (x == null) {
+    return box.x
+  }
+
+  return this.attr('x', this.attr('x') + x - box.x)
+}
+
+// Move over y-axis
+export function y (y, box = this.bbox()) {
+  if (y == null) {
+    return box.y
+  }
+
+  return this.attr('y', this.attr('y') + y - box.y)
+}
+
+export function move (x, y, box = this.bbox()) {
+  return this.x(x, box).y(y, box)
+}
+
+// Move center over x-axis
+export function cx (x, box = this.bbox()) {
+  if (x == null) {
+    return box.cx
+  }
+
+  return this.attr('x', this.attr('x') + x - box.cx)
+}
+
+// Move center over y-axis
+export function cy (y, box = this.bbox()) {
+  if (y == null) {
+    return box.cy
+  }
+
+  return this.attr('y', this.attr('y') + y - box.cy)
+}
+
+export function center (x, y, box = this.bbox()) {
+  return this.cx(x, box).cy(y, box)
+}
+
+export function ax (x) {
+  return this.attr('x', x)
+}
+
+export function ay (y) {
+  return this.attr('y', y)
+}
+
+export function amove (x, y) {
+  return this.ax(x).ay(y)
+}
+
+// Enable / disable build mode
+export function build (build) {
+  this._build = !!build
+  return this
+}
diff --git a/src/modules/optional/sugar.js b/src/modules/optional/sugar.js
index 0da0fe4..0de2c04 100644
--- a/src/modules/optional/sugar.js
+++ b/src/modules/optional/sugar.js
@@ -87,16 +87,13 @@ registerMethods([ 'Element', 'Runner' ], {
   },
 
   // Map flip to transform
-  flip: function (direction, around) {
-    var directionString = typeof direction === 'string' ? direction
-      : isFinite(direction) ? 'both'
-      : 'both'
-    var origin = (direction === 'both' && isFinite(around)) ? [ around, around ]
-      : (direction === 'x') ? [ around, 0 ]
-      : (direction === 'y') ? [ 0, around ]
-      : isFinite(direction) ? [ direction, direction ]
-      : [ 0, 0 ]
-    return this.transform({ flip: directionString, origin: origin }, true)
+  flip: function (direction = 'both', origin = 'center') {
+    if ('xybothtrue'.indexOf(direction) === -1) {
+      origin = direction
+      direction = 'both'
+    }
+
+    return this.transform({ flip: direction, origin: origin }, true)
   },
 
   // Opacity
@@ -144,18 +141,6 @@ registerMethods([ 'Element', 'Runner' ], {
   }
 })
 
-registerMethods('Text', {
-  ax (x) {
-    return this.attr('x', x)
-  },
-  ay (y) {
-    return this.attr('y', y)
-  },
-  amove (x, y) {
-    return this.ax(x).ay(y)
-  }
-})
-
 // Add events to elements
 const methods = [ 'click',
   'dblclick',
diff --git a/src/svg.js b/src/svg.js
index f6c4bc5..85f2518 100644
--- a/src/svg.js
+++ b/src/svg.js
@@ -2,8 +2,8 @@ import * as svgMembers from './main.js'
 import { makeInstance } from './utils/adopter.js'
 
 // The main wrapping element
-export default function SVG (element) {
-  return makeInstance(element)
+export default function SVG (element, isHTML) {
+  return makeInstance(element, isHTML)
 }
 
 Object.assign(SVG, svgMembers)
diff --git a/src/types/Box.js b/src/types/Box.js
index 5c31535..6d7d8a9 100644
--- a/src/types/Box.js
+++ b/src/types/Box.js
@@ -95,7 +95,7 @@ export default class Box {
     // offset by window scroll position, because getBoundingClientRect changes when window is scrolled
     this.x += globals.window.pageXOffset
     this.y += globals.window.pageYOffset
-    return this
+    return new Box(this)
   }
 
   toString () {
@@ -166,7 +166,7 @@ registerMethods({
       // Firefox does not support clientHeight and returns 0
       // https://bugzilla.mozilla.org/show_bug.cgi?id=874811
       if (!width && !height) {
-        var style = window.getComputedStyle(this.node)
+        var style = globals.window.getComputedStyle(this.node)
         width = parseFloat(style.getPropertyValue('width'))
         height = parseFloat(style.getPropertyValue('height'))
       }
diff --git a/src/utils/adopter.js b/src/utils/adopter.js
index e8b30ea..30eab84 100644
--- a/src/utils/adopter.js
+++ b/src/utils/adopter.js
@@ -13,7 +13,7 @@ export function create (name) {
   return globals.document.createElementNS(ns, name)
 }
 
-export function makeInstance (element) {
+export function makeInstance (element, isHTML = false) {
   if (element instanceof Base) return element
 
   if (typeof element === 'object') {
@@ -28,7 +28,8 @@ export function makeInstance (element) {
     return adopter(globals.document.querySelector(element))
   }
 
-  var node = create('svg')
+  // Make sure, that HTML elements are created with the correct namespace
+  var node = isHTML ? globals.document.createElement('div') : create('svg')
   node.innerHTML = element
 
   // We can use firstChild here because we know,
diff --git a/src/utils/utils.js b/src/utils/utils.js
index 5d8706e..ee47079 100644
--- a/src/utils/utils.js
+++ b/src/utils/utils.js
@@ -43,7 +43,7 @@ export function camelCase (s) {
   })
 }
 
-// Convert camel cased string to string seperated
+// Convert camel cased string to dash seperated
 export function unCamelCase (s) {
   return s.replace(/([A-Z])/g, function (m, g) {
     return '-' + g.toLowerCase()
@@ -73,31 +73,46 @@ export function proportionalSize (element, width, height, box) {
   }
 }
 
+/**
+ * This function adds support for string origins.
+ * It searches for an origin in o.origin o.ox and o.originX.
+ * This way, origin: {x: 'center', y: 50} can be passed as well as ox: 'center', oy: 50
+**/
 export function getOrigin (o, element) {
-  // Allow origin or around as the names
-  const origin = o.origin // o.around == null ? o.origin : o.around
-  let ox, oy
-
-  // Allow the user to pass a string to rotate around a given point
-  if (typeof origin === 'string' || origin == null) {
-    // Get the bounding box of the element with no transformations applied
-    const string = (origin || 'center').toLowerCase().trim()
+  const origin = o.origin
+  // First check if origin is in ox or originX
+  let ox = o.ox != null ? o.ox
+    : o.originX != null ? o.originX
+    : 'center'
+  let oy = o.oy != null ? o.oy
+    : o.originY != null ? o.originY
+    : 'center'
+
+  // Then check if origin was used and overwrite in that case
+  if (origin != null) {
+    [ ox, oy ] = Array.isArray(origin) ? origin
+      : typeof origin === 'object' ? [ origin.x, origin.y ]
+      : [ origin, origin ]
+  }
+
+  // Make sure to only call bbox when actually needed
+  const condX = typeof ox === 'string'
+  const condY = typeof oy === 'string'
+  if (condX || condY) {
     const { height, width, x, y } = element.bbox()
 
-    // Calculate the transformed x and y coordinates
-    const bx = string.includes('left') ? x
-      : string.includes('right') ? x + width
-      : x + width / 2
-    const by = string.includes('top') ? y
-      : string.includes('bottom') ? y + height
-      : y + height / 2
-
-    // Set the bounds eg : "bottom-left", "Top right", "middle" etc...
-    ox = o.ox != null ? o.ox : bx
-    oy = o.oy != null ? o.oy : by
-  } else {
-    ox = origin[0]
-    oy = origin[1]
+    // And only overwrite if string was passed for this specific axis
+    if (condX) {
+      ox = ox.includes('left') ? x
+        : ox.includes('right') ? x + width
+        : x + width / 2
+    }
+
+    if (condY) {
+      oy = oy.includes('top') ? y
+        : oy.includes('bottom') ? y + height
+        : y + height / 2
+    }
   }
 
   // Return the origin as it is if it wasn't a string
diff --git a/svg.js.d.ts b/svg.js.d.ts
index e5db341..24cdc0f 100644
--- a/svg.js.d.ts
+++ b/svg.js.d.ts
@@ -15,30 +15,37 @@ declare module "@svgdotjs/svg.js" {
     function get(id: string): Element;

 

     function create(name: string): any;

-    function extend(parent: Object, obj: Object): void;

-    function invent(config: Object): any;

+    function extend(parent: object, obj: object): void;

+    function invent(config: object): any;

     function adopt(node: HTMLElement): Element;

     function prepare(element: HTMLElement): void;

     function getClass(name: string): Element;

 

-    function on(el: Node, events: string, cb: EventListener, binbind?: any, options?: AddEventListenerOptions): void;

-    function on(el: Node, events: Event[], cb: EventListener, binbind?: any, options?: AddEventListenerOptions): void;

+    function on(el: Node | Window, events: string, cb: EventListener, binbind?: any, options?: AddEventListenerOptions): void;

+    function on(el: Node | Window, events: Event[], cb: EventListener, binbind?: any, options?: AddEventListenerOptions): void;

 

-    function off(el: Node, events?: string, cb?: EventListener | number): void;

-    function off(el: Node, events?: Event[], cb?: EventListener | number): void;

+    function off(el: Node | Window, events?: string, cb?: EventListener | number): void;

+    function off(el: Node | Window, events?: Event[], cb?: EventListener | number): void;

 

-    function dispatch(node: Node, event: Event, data?: Object): Event

+    function dispatch(node: Node | Window, event: Event, data?: object, options?: object): Event

 

     function find(query: QuerySelector): List<Element>

     function findOne(query: QuerySelector): Element

 

+    function registerWindow(win: Window, doc: Document): void;

+

     let utils: {

         map(array: any[], block: Function): any;

         filter(array: any[], block: Function): any;

         radians(d: number): number;

         degrees(r: number): number;

-        filterSVGElements: HTMLElement[]

+        camelCase(s: string): string;

+        unCamelCase(s: string): string;

+        capitalize(s: string): string;

+        // proportionalSize

+        // getOrigin

     }

+

     let defaults: {

         attrs: {

             'fill-opacity': number;

@@ -79,7 +86,7 @@ declare module "@svgdotjs/svg.js" {
         '>'(pos: number): number;

         '<'(pos: number): number;

         bezier(x1: number, y1: number, x2: number, y2: number): (t: number) => number;

-        steps(steps: number, stepPosition?: string): (t: number, beforeFlag?: boolean) => number;

+        steps(steps: number, stepPosition?: "jump-start"|"jump-end"|"jump-none"|"jump-both"|"start"|"end"): (t: number, beforeFlag?: boolean) => number;

     }

 

     let regex: {

@@ -117,7 +124,7 @@ declare module "@svgdotjs/svg.js" {
 

     // ************ Standard object/option/properties declaration ************

 

-    type AttrNumberValue = number | "auto"

+    type AttrNumberValue = number | "auto";

 

     /**

      * The SVG core attributes are all the common attributes that can be specified on any SVG element.

@@ -384,7 +391,7 @@ declare module "@svgdotjs/svg.js" {
         unit: any

 

         toString(): string;

-        toJSON(): Object;  // same as toString

+        toJSON(): object;  // same as toString

         toArray(): NumberUnit

         valueOf(): number;

         plus(number: NumberAlias): Number;

@@ -540,19 +547,22 @@ declare module "@svgdotjs/svg.js" {
     }

 

     // List.js

-    interface List<T> extends Array<T> {

+    interface List<T> extends BuiltInArray<T> {

+        // I have no clue how to deal with this

+        // [key: string]: (...arg0: any[]) => List<T>

+        // [key: string]: () => List<any>

         each(fn: Function): void

         each(...args: any[]): void

         toArray(): T[]

     }

 

-    class EventObject {

-        [key: string]: EventObject;

+    class Eventobject {

+        [key: string]: Eventobject;

     }

 

     // EventTarget.js

     class EventTarget {

-        events: EventObject

+        events: Eventobject

 

         addEventListener(): void

         dispatch(event: Event | string, data?: object): Event

@@ -616,10 +626,6 @@ declare module "@svgdotjs/svg.js" {
         constructor(a: number, b: number, c: number, d: number, space?: string)

         constructor(a: number[], space?: string)

 

-        brightness(): number;

-        morph(color: ColorAlias): Color;

-        at(pos: number): Color;

-

         rgb(): Color

         lab(): Color

         xyz(): Color

@@ -633,14 +639,17 @@ declare module "@svgdotjs/svg.js" {
 

         to(a: any): Morphable

         fromArray(a: any): this

+

+        static random(mode: 'sine', time?: number): Color

+        static random(mode?: string): Color

     }

 

     // Box.js

     interface BoxLike {

-        height?: number;

-        width?: number;

-        y?: number;

-        x?: number;

+        height: number;

+        width: number;

+        y: number;

+        x: number;

         cx?: number;

         cy?: number;

         w?: number;

@@ -667,7 +676,7 @@ declare module "@svgdotjs/svg.js" {
         constructor(source: DOMRect);

         constructor(x: number, y: number, width: number, height: number);

 

-        merge(box: Box): Box;

+        merge(box: BoxLike): Box;

         transform(m: Matrix): Box

         addOffset(): this;

         toString(): string;

@@ -677,7 +686,7 @@ declare module "@svgdotjs/svg.js" {
     }

 

     // Morphable.js

-    type MorphValueLike = string | number | ObjectBag | NonMorphable | MatrixExtract | Array<any> | any[]

+    type MorphValueLike = string | number | objectBag | NonMorphable | MatrixExtract | Array<any> | any[]

 

     class Morphable {

         constructor();

@@ -695,23 +704,23 @@ declare module "@svgdotjs/svg.js" {
         at(pos: number): any

     }

 

-    class ObjectBag {

+    class objectBag {

         constructor();

-        constructor(a: Object);

-        valueOf(): Object

-        toArray(): Object[]

+        constructor(a: object);

+        valueOf(): object

+        toArray(): object[]

 

-        to(a: Object): Morphable

+        to(a: object): Morphable

         fromArray(a: any[]): this

     }

 

     class NonMorphable {

-        constructor(a: Object)

-        valueOf(): Object

-        toArray(): Object[]

+        constructor(a: object)

+        valueOf(): object

+        toArray(): object[]

 

-        to(a: Object): Morphable

-        fromArray(a: Object): this

+        to(a: object): Morphable

+        fromArray(a: object): this

     }

 

     class TransformBag {

@@ -769,6 +778,7 @@ declare module "@svgdotjs/svg.js" {
         unschedule(runner: Runner): this

         getEndTime(): number

         updateTime(): this

+        persist(dtOrForever?: number | boolean): this

         play(): this

         pause(): this

         stop(): this

@@ -801,7 +811,7 @@ declare module "@svgdotjs/svg.js" {
         constructor(options: object);

         constructor(options: Controller);

 

-        static sanitise: (duration?: TimeLike, delay?: number, when?: string) => Object

+        static sanitise: (duration?: TimeLike, delay?: number, when?: string) => object

 

         element(): Element

         element(el: Element): this

@@ -823,6 +833,7 @@ declare module "@svgdotjs/svg.js" {
         duration(): number

         loops(): number

         loops(p: number): this

+        persist(dtOrForever?: number | boolean): this

         position(): number

         position(p: number): this

         progress(): number

@@ -839,10 +850,10 @@ declare module "@svgdotjs/svg.js" {
         clearTransformsFromQueue(): void

 

         // extends prototypes

-        attr(a: string | Object, v?: string): this

-        css(s: string | Object, v?: string): this

-        styleAttr(type: string, name: string | Object, val?: string): this

-        zoom(level: NumberAlias, point: Point): this

+        attr(a: string | object, v?: string): this

+        css(s: string | object, v?: string): this

+        styleAttr(type: string, name: string | object, val?: string): this

+        zoom(level: NumberAlias, point?: Point): this

         transform(transforms: MatrixTransformParam, relative?: boolean, affine?: boolean): this

         x(x: number): this

         y(y: number): this

@@ -855,7 +866,7 @@ declare module "@svgdotjs/svg.js" {
         size(width: number, height: number): this

         width(width: number): this

         height(height: number): this

-        plot(a: Object): this

+        plot(a: object): this

         plot(a: number, b: number, c: number, d: number): this

         leading(value: number): this

         viewbox(x: number, y: number, width: number, height: number): this

@@ -877,12 +888,12 @@ declare module "@svgdotjs/svg.js" {
         immediates: Queue

 

         timer(): boolean

-        frame(fn: Function): Object

-        timeout(fn: Function, delay?: number): Object

-        immediate(fn: Function): Object

-        cancelFrame(o: Object): void

-        clearTimeout(o: Object): void

-        cancelImmediate(o: Object): void

+        frame(fn: Function): object

+        timeout(fn: Function, delay?: number): object

+        immediate(fn: Function): object

+        cancelFrame(o: object): void

+        clearTimeout(o: object): void

+        cancelImmediate(o: object): void

     }

 

     // use with parent query

@@ -924,15 +935,15 @@ declare module "@svgdotjs/svg.js" {
         node: HTMLElement | SVGElement;

         type: string;

 

-        constructor(node?: HTMLElement, attr?: Object);

-        constructor(att: Object);

+        constructor(node?: HTMLElement, attr?: object);

+        constructor(att: object);

         add(element: Element, i?: number): this;

         addTo(parent: Dom | HTMLElement | string): this

         children(): List<Element>;

         clear(): this;

         clone(): this;

         each(block: (index: number, children: Element[]) => void, deep?: boolean): this;

-        element(element: string, inherit?: Object): this;

+        element(element: string, inherit?: object): this;

         first(): Element;

         get(i: number): Element;

         getEventHolder(): LinkedHTMLElement;

@@ -994,17 +1005,17 @@ declare module "@svgdotjs/svg.js" {
          */

         attr(name: string, value: any, namespace?: string): this;

         attr(name: string): any;

-        attr(obj: Object): this;

-        attr(obj: Object[]): Object;

+        attr(obj: object): this;

+        attr(obj: object[]): object;

 

         // prototype extend Selector in selector.js

         find(query: string): List<Element>

         findOne(query: string): Dom

 

         // prototype method register in data.js

-        data(a: string): Object | string | number

-        data(a: string, v: Object, substain?: boolean): this

-        data(a: Object): this

+        data(a: string): object | string | number

+        data(a: string, v: object, substain?: boolean): this

+        data(a: object): this

 

         // prototype method register in arrange.js

         siblings(): List<Element>

@@ -1028,11 +1039,11 @@ declare module "@svgdotjs/svg.js" {
         toggleClass(name: string): this

 

         // prototype method register in css.js

-        css(): CSSStyleDeclaration;

+        css(): object;

         css(style: string): string

+        css(style: string[]): object;

         css(style: string, val: any): this

-        css(style: CSSStyleDeclaration): this

-        css(style: string[]): CSSStyleDeclaration;

+        css(style: object): this

         show(): this

         hide(): this

         visible(): boolean

@@ -1040,10 +1051,10 @@ declare module "@svgdotjs/svg.js" {
         // memory.js

         remember(name: string, value: any): this;

         remember(name: string): any;

-        remember(obj: Object): this;

+        remember(obj: object): this;

         forget(...keys: string[]): this;

         forget(): this;

-        memory(): Object;

+        memory(): object;

 

         addEventListener(): void

         dispatch(event: Event | string, data?: object): Event

@@ -1052,8 +1063,8 @@ declare module "@svgdotjs/svg.js" {
         getEventHolder(): this | Node

         getEventTarget(): this | Node

 

-        on(events: string | Event[], cb: EventListener, binbind?: any, options?: AddEventListenerOptions): this;

-        off(events?: string | Event[], cb?: EventListener | number): this;

+        // on(events: string | Event[], cb: EventListener, binbind?: any, options?: AddEventListenerOptions): this;

+        // off(events?: string | Event[], cb?: EventListener | number): this;

         removeEventListener(): void

     }

 

@@ -1061,7 +1072,7 @@ declare module "@svgdotjs/svg.js" {
     class ClipPath extends Container {

         constructor();

         constructor(node?: SVGClipPathElement);

-        constructor(attr: Object);

+        constructor(attr: object);

         node: SVGClipPathElement;

 

         targets(): List<Element>;

@@ -1109,6 +1120,7 @@ declare module "@svgdotjs/svg.js" {
         viewbox(x: number, y: number, width: number, height: number): this;

         textPath(text: string | Text, path: string | Path): TextPath

         symbol(): Symbol

+        zoom(level: NumberAlias, point?: Point)

     }

 

     class Defs extends Container {

@@ -1150,20 +1162,20 @@ declare module "@svgdotjs/svg.js" {
         opacity(value: number): this

         font(a: string): string

         font(a: string, v: string | number): this

-        font(a: Object): this

+        font(a: object): this

     }

 

     // Symbol.js

     class Symbol extends Container {

         constructor(svgElement?: SVGSymbolElement);

-        constructor(attr: Object)

+        constructor(attr: object)

         node: SVGSymbolElement;

     }

 

     class Element extends Dom implements Sugar {

         constructor(node?: SVGElement);

-        constructor(attr: Object);

-        node: HTMLElement | SVGElement;

+        constructor(attr: object);

+        node: SVGElement;

         type: string;

         dom: any

 

@@ -1174,8 +1186,8 @@ declare module "@svgdotjs/svg.js" {
         attr(): any;

         attr(name: string, value: any, namespace?: string): this;

         attr(name: string): any;

-        attr(obj: string[]): Object;

-        attr(obj: Object): this;

+        attr(obj: string[]): object;

+        attr(obj: object): this;

         back(): this;

         backward(): this;

         bbox(): Box;

@@ -1193,7 +1205,7 @@ declare module "@svgdotjs/svg.js" {
         cy(y: number): this;

         data(name: string, value: any, sustain?: boolean): this;

         data(name: string): any;

-        data(val: Object): this;

+        data(val: object): this;

         dblclick(cb: Function | null): this;

         defs(): Defs;

         dmove(x: NumberAlias, y: NumberAlias): this;

@@ -1209,7 +1221,7 @@ declare module "@svgdotjs/svg.js" {
         fire(event: string, data?: any): this;

         flip(a: string, offset?: number): this;

         flip(offset?: number): this;

-        font(a: Object): this

+        font(a: object): this

         font(a: string, v: string | number): this

         font(a: string): string

         forget(...keys: string[]): this;

@@ -1217,7 +1229,7 @@ declare module "@svgdotjs/svg.js" {
         forward(): this;

         front(): this;

         hasClass(name: string): boolean;

-        height(): number;

+        height(): NumberAlias;

         height(height: NumberAlias): this;

         hide(): this;

         hide(): this;

@@ -1235,7 +1247,7 @@ declare module "@svgdotjs/svg.js" {
         matrix(a?: number, b?: number, c?: number, d?: number, e?: number, f?: number): this;

         matrix(mat: MatrixAlias, b?: number, c?: number, d?: number, e?: number, f?: number): this;

         matrixify(): Matrix;

-        memory(): Object;

+        memory(): object;

         mousedown(cb: Function | null): this;

         mousemove(cb: Function | null): this;

         mouseout(cb: Function | null): this;

@@ -1246,23 +1258,23 @@ declare module "@svgdotjs/svg.js" {
         move(x: NumberAlias, y: NumberAlias): this;

         native(): LinkedHTMLElement;

         next(): Element;

-        off(events?: string | Event[], cb?: EventListener | number): this;

-        on(event: string, cb: Function, context?: Object): this;

+        // off(events?: string | Event[], cb?: EventListener | number): this;

+        // on(event: string, cb: Function, context?: object): this;

         opacity(): number;

         opacity(o: number): this;

         relative(x: number, y: number): this

         shear(lam: Matrix, cx: number, cy: number): this

         toRoot(): Svg;

         /**

-         * By default parents will return a list of element up until html Document.

+         * By default parents will return a list of elements up until the root svg.

          */

         parents(): List<Element>

         /**

-         * List the parent by hierarchy until the given parent type or object. If the given value is null

+         * List the parent by hierarchy until the given parent type or matcher. If the given value is null

          * then the result is only provided the list up until Svg root element which mean no Dom parent element is included.

          * @param util a parent type

          */

-        parents<T extends Dom>(util: string | null | T | HTMLElement): List<Element>

+        parents<T extends Dom>(util: QuerySelector | T | null ): List<Element>

         /**

          * Get reference svg element based on the given attribute.

          * @param attr a svg attribute

@@ -1279,7 +1291,7 @@ declare module "@svgdotjs/svg.js" {
         reference(type: string): Element;

         remember(name: string, value: any): this;

         remember(name: string): any;

-        remember(obj: Object): this;

+        remember(obj: object): this;

         remove(): this;

         removeClass(name: string): this;

         root(): Svg;

@@ -1314,11 +1326,11 @@ declare module "@svgdotjs/svg.js" {
         unmask(): this;

         untransform(): this;

         visible(): boolean;

-        width(): number;

+        width(): NumberAlias;

         width(width: NumberAlias): this;

-        x(): number;

+        x(): NumberAlias;

         x(x: NumberAlias): this;

-        y(): number;

+        y(): NumberAlias;

         y(y: NumberAlias): this;

     }

 

@@ -1367,7 +1379,7 @@ declare module "@svgdotjs/svg.js" {
     }

     class Gradient extends Container {

         constructor(node?: SVGGradientElement);

-        constructor(attr: Object);

+        constructor(attr: object);

         constructor(type: string);

         node: SVGGradientElement;

 

@@ -1392,7 +1404,7 @@ declare module "@svgdotjs/svg.js" {
     // group.js

     class G extends Container {

         constructor(node?: SVGGElement);

-        constructor(attr: Object);

+        constructor(attr: object);

         node: SVGGElement;

         gbox(): Box;

     }

@@ -1400,7 +1412,7 @@ declare module "@svgdotjs/svg.js" {
     // hyperlink.js

     class A extends Container {

         constructor(node?: SVGAElement);

-        constructor(attr: Object);

+        constructor(attr: object);

         node: SVGAElement;

         to(url: string): this;

         to(): string;

@@ -1411,9 +1423,9 @@ declare module "@svgdotjs/svg.js" {
     // image.js

     class Image extends Shape {

         constructor(node?: SVGImageElement);

-        constructor(attr: Object);

+        constructor(attr: object);

         node: SVGImageElement;

-        load(url?: string): this;

+        load(url?: string, callback?: (event: Event) => void): this;

     }

 

     // line.js

@@ -1449,7 +1461,7 @@ declare module "@svgdotjs/svg.js" {
     // mask.js

     class Mask extends Container {

         constructor(node?: SVGMaskElement);

-        constructor(attr: Object);

+        constructor(attr: object);

         node: SVGMaskElement;

         remove(): this

         targets(): List<Element>;

@@ -1493,7 +1505,7 @@ declare module "@svgdotjs/svg.js" {
         plot(): PointArray

         plot(p: PointArrayAlias): this;

         clear(): this;

-        move(x: NumberAlias, y: NumberAlias): this;

+        move(x: number, y: number): this;

         size(width: number, height?: number): this;

     }

 

@@ -1518,13 +1530,21 @@ declare module "@svgdotjs/svg.js" {
         array(): PointArray;

         plot(): PointArray

         plot(p: PointArrayAlias): this;

+        x(): number;

+        x(x: number): this

+        y(): number;

+        y(y: number): this

+        height(): number

+        height(h: number): this

+        width(): number

+        width(w: number): this

         move(x: number, y: number): this;

         size(width: number, height?: number): this;

         marker(position: string, width?: number, height?: number, block?: (marker: Marker) => void): Marker;

         marker(position: string, marker: Marker): Marker;

     }

 

-    class Polygon extends Shape implements poly {

+    class Polygon extends Shape implements poly, pointed {

         constructor(node?: SVGPolygonElement);

         constructor(attr: PolyAttr)

 

@@ -1532,6 +1552,14 @@ declare module "@svgdotjs/svg.js" {
         array(): PointArray;

         plot(): PointArray;

         plot(p: PointArrayAlias): this;

+        x(): number;

+        x(x: number): this

+        y(): number;

+        y(y: number): this

+        height(): number

+        height(h: number): this

+        width(): number

+        width(w: number): this

         move(x: number, y: number): this;

         size(width: number, height?: number): this;

         marker(position: string, width?: number, height?: number, block?: (marker: Marker) => void): Marker;

@@ -1601,12 +1629,12 @@ declare module "@svgdotjs/svg.js" {
         path(): TextPath

         path(d: PathArrayAlias | Path): TextPath;

         track(): Element;

-        textPath(): Element;

         ax(): string

         ax(x: string): this

         ay(): string

         ay(y: string): this

         amove(x: number, y: number): this

+        textPath(): TextPath

 

         // main.js, from extend/copy prototypes from Tspan

         tspan(text: string): Tspan;

@@ -1643,7 +1671,7 @@ declare module "@svgdotjs/svg.js" {
 

     // use.js

     class Use extends Shape {

-        element(element: string, file?: string): this;

+        use(element: string, file?: string): this;

     }

 

     // viewbox.js

@@ -1654,10 +1682,7 @@ declare module "@svgdotjs/svg.js" {
         y: number;

         width: number;

         height: number;

-        zoom?: number;

         toString(): string;

-        morph(source: ViewBoxAlias): ViewBox;

-        morph(x: number, y: number, width: number, height: number): ViewBox;

         at(pos: number): ViewBox;

     }

 }