5 files changed, 22 insertions, 18 deletions

diff --git a/src/clip.js b/src/clip.js
index dd2f7b7..b43712e 100644
--- a/src/clip.js
+++ b/src/clip.js
@@ -40,7 +40,7 @@ SVG.extend(SVG.Element, {
     var clipper = element instanceof SVG.ClipPath ? element : this.parent().clip().add(element)
 
     // apply mask
-    return this.attr('clip-path', 'url("#' + clipper.attr('id') + '")')
+    return this.attr('clip-path', 'url("#' + clipper.id() + '")')
   }
   // Unclip element
 , unclip: function() {
diff --git a/src/element.js b/src/element.js
index 1e3dcb0..cedaf2d 100644
--- a/src/element.js
+++ b/src/element.js
@@ -58,7 +58,7 @@ SVG.Element = SVG.invent({
         .height(new SVG.Number(p.height))
     }
     // Clone element
-  , clone: function(parent, withData) {
+  , clone: function(parent) {
       // write dom data to the dom so the clone can pickup the data
       this.writeDataToDom()
 
@@ -94,6 +94,12 @@ SVG.Element = SVG.invent({
     }
     // Get / set id
   , id: function(id) {
+      // generate new id if no id set
+      if(typeof id == 'undefined' && !this.node.id) {
+        this.node.id = SVG.eid(this.type)
+      }
+      
+      // dont't set directly width this.node.id to make `null` work correctly
       return this.attr('id', id)
     }
     // Checks whether the given point inside the bounding box of the element
@@ -119,7 +125,7 @@ SVG.Element = SVG.invent({
     }
     // Return id on string conversion
   , toString: function() {
-      return this.attr('id')
+      return this.id()
     }
     // Return array of classes on the node
   , classes: function() {
diff --git a/src/helpers.js b/src/helpers.js
index 461975a..6a07482 100644
--- a/src/helpers.js
+++ b/src/helpers.js
@@ -38,7 +38,7 @@ function matches(el, selector) {
 }
 
 // Convert dash-separated-string to camelCase
-function camelCase(s) { 
+function camelCase(s) {
   return s.toLowerCase().replace(/-(.)/g, function(m, g) {
     return g.toUpperCase()
   })
@@ -49,7 +49,7 @@ function capitalize(s) {
   return s.charAt(0).toUpperCase() + s.slice(1)
 }
 
-// Ensure to six-based hex 
+// Ensure to six-based hex
 function fullHex(hex) {
   return hex.length == 4 ?
     [ '#',
@@ -69,13 +69,13 @@ function compToHex(comp) {
 function proportionalSize(element, width, height) {
   if (width == null || height == null) {
     var box = element.bbox()
-    
+
     if (width == null)
       width = box.width / box.height * height
     else if (height == null)
       height = box.height / box.width * width
   }
-  
+
   return {
     width:  width
   , height: height
@@ -99,7 +99,7 @@ function arrayToMatrix(a) {
 function parseMatrix(matrix) {
   if (!(matrix instanceof SVG.Matrix))
     matrix = new SVG.Matrix(matrix)
-  
+
   return matrix
 }
 
@@ -142,7 +142,7 @@ function arrayToString(a) {
       }
     }
   }
-  
+
   return s + ' '
 }
 
@@ -153,7 +153,10 @@ function assignNewId(node) {
     if (node.childNodes[i] instanceof window.SVGElement)
       assignNewId(node.childNodes[i])
 
-  return SVG.adopt(node).id(SVG.eid(node.nodeName))
+  if(node.id)
+    return SVG.adopt(node).id(SVG.eid(node.nodeName))
+
+  return SVG.adopt(node)
 }
 
 // Add more bounding box properties
diff --git a/src/mask.js b/src/mask.js
index 4371b37..610608e 100644
--- a/src/mask.js
+++ b/src/mask.js
@@ -19,7 +19,7 @@ SVG.Mask = SVG.invent({
     }
 
   , targets: function() {
-      return SVG.select('svg [mask*="' +this.id() +'"]')
+      return SVG.select('svg [mask*="' + this.id() + '"]')
     }
   }
 
@@ -40,7 +40,7 @@ SVG.extend(SVG.Element, {
     var masker = element instanceof SVG.Mask ? element : this.parent().mask().add(element)
 
     // apply mask
-    return this.attr('mask', 'url("#' + masker.attr('id') + '")')
+    return this.attr('mask', 'url("#' + masker.id() + '")')
   }
   // Unmask element
 , unmask: function() {
diff --git a/src/svg.js b/src/svg.js
index 0716a0a..043e245 100644
--- a/src/svg.js
+++ b/src/svg.js
@@ -36,12 +36,7 @@ SVG.eid = function(name) {
 // Method for element creation
 SVG.create = function(name) {
   // create element
-  var element = document.createElementNS(this.ns, name)
-
-  // apply unique id
-  element.setAttribute('id', this.eid(name))
-
-  return element
+  return document.createElementNS(this.ns, name)
 }
 
 // Method for extending objects