IMplemented <use> element, bumped to v0.23

4 files changed, 20 insertions, 12 deletions

diff --git a/src/element.js b/src/element.js
index 60fbb39..3337df8 100644
--- a/src/element.js
+++ b/src/element.js
@@ -146,10 +146,6 @@ SVG.extend(SVG.Element, {
       return this.style(v)
     
     } else {
-      /* process gradient or pattern fill */
-      if (typeof v.fill === 'function')
-        v = v.fill()
-
       /* treat x differently on text elements */
       if (a == 'x' && Array.isArray(this.lines))
         for (n = this.lines.length - 1; n >= 0; n--)
@@ -363,6 +359,10 @@ SVG.extend(SVG.Element, {
 , visible: function() {
     return this.style('display') != 'none'
   }
+  // Return id on string conversion
+, toString: function() {
+    return this.attr('id')
+  }
   // Private: find svg parent by instance
 , _parent: function(parent) {
     var element = this
diff --git a/src/gradient.js b/src/gradient.js
index 2f6e30a..c5c51d1 100644
--- a/src/gradient.js
+++ b/src/gradient.js
@@ -46,6 +46,10 @@ SVG.extend(SVG.Gradient, {
 , fill: function() {
     return 'url(#' + this.attr('id') + ')'
   }
+  // Alias string convertion to fill
+, toString: function() {
+    return this.fill()
+  }
   
 })
 
diff --git a/src/pattern.js b/src/pattern.js
index dc57e77..4807049 100644
--- a/src/pattern.js
+++ b/src/pattern.js
@@ -11,6 +11,10 @@ SVG.extend(SVG.Pattern, {
   fill: function() {
     return 'url(#' + this.attr('id') + ')'
   }
+  // Alias string convertion to fill
+, toString: function() {
+    return this.fill()
+  }
   
 })
 
diff --git a/src/instance.js b/src/use.js
index 086a019..d507998 100644
--- a/src/instance.js
+++ b/src/use.js
@@ -7,10 +7,13 @@ SVG.Use.prototype = new SVG.Element
 
 //
 SVG.extend(SVG.Use, {
-  
-  // (re)load image
-  load: function(url) {
-    return (url ? this.attr('xlink:href', (this.src = url), SVG.xlink) : this)
+  // Use element as a reference
+  element: function(element) {
+    /* store target element */
+    this.target = element
+
+    /* set lined element */
+    return this.attr('xlink:href', '#' + element, SVG.xlink)
   }
   
 })
@@ -19,10 +22,7 @@ SVG.extend(SVG.Use, {
 SVG.extend(SVG.Container, {
   // Create a use element
   use: function(element) {
-    if (element instanceof SVG.Element)
-      element = element.id
-
-    return this.put(new SVG.Use().)
+    return this.put(new SVG.Use).element(element)
   }
 
 })
\ No newline at end of file