Added marker, symbol and dynamic referencing

12 files changed, 138 insertions, 12 deletions

diff --git a/src/defs.js b/src/defs.js
index a50ad94..ad66cc5 100755
--- a/src/defs.js
+++ b/src/defs.js
@@ -5,4 +5,5 @@ SVG.Defs = SVG.invent({
 
   // Inherit from
 , inherit: SVG.Container
+  
 })
\ No newline at end of file
diff --git a/src/element.js b/src/element.js
index e63b57e..b12947b 100755
--- a/src/element.js
+++ b/src/element.js
@@ -61,10 +61,9 @@ SVG.Element = SVG.invent({
   , size: function(width, height) {
       var p = proportionalSize(this.bbox(), width, height)
 
-      return this.attr({
-        width:  new SVG.Number(p.width)
-      , height: new SVG.Number(p.height)
-      })
+      return this
+        .width(new SVG.Number(p.width))
+        .height(new SVG.Number(p.height))
     }
     // Clone element
   , clone: function() {
@@ -308,6 +307,10 @@ SVG.Element = SVG.invent({
       
       return this
     }
+    // Get / set id
+  , id: function(id) {
+      return this.attr('id', id)
+    }
     // Get bounding box
   , bbox: function() {
       return new SVG.BBox(this)
@@ -384,6 +387,10 @@ SVG.Element = SVG.invent({
       }
       return this
     }
+    // Get referenced element form attribute value
+  , reference: function(attr) {
+      return SVG.get(this.attr(attr))
+    }
     // Private: find svg parent by instance
   , _parent: function(parent) {
       var element = this
diff --git a/src/gradient.js b/src/gradient.js
index 895f8ca..56c1376 100755
--- a/src/gradient.js
+++ b/src/gradient.js
@@ -47,7 +47,7 @@ SVG.Gradient = SVG.invent({
     }
     // Return the fill id
   , fill: function() {
-      return 'url(#' + this.attr('id') + ')'
+      return 'url(#' + this.id() + ')'
     }
     // Alias string convertion to fill
   , toString: function() {
diff --git a/src/helpers.js b/src/helpers.js
index 5a1dd6d..c63c215 100644
--- a/src/helpers.js
+++ b/src/helpers.js
@@ -114,6 +114,13 @@ function parseMatrix(o) {
   return o
 }
 
+// Get id from reference string
+function idFromReference(url) {
+  var m = url.toString().match(SVG.regex.reference)
+
+  if (m) return m[1]
+}
+
 // Shim layer with setTimeout fallback by Paul Irish
 window.requestAnimFrame = (function(){
   return  window.requestAnimationFrame       ||
diff --git a/src/marker.js b/src/marker.js
new file mode 100644
index 0000000..30b09a4
--- /dev/null
+++ b/src/marker.js
@@ -0,0 +1,80 @@
+SVG.Marker = SVG.invent({
+  // Initialize node
+  create: 'marker'
+
+  // Inherit from
+, inherit: SVG.Container
+
+  // Add class methods
+, extend: {
+    // Set width of element
+    width: function(width) {
+      return this.attr('markerWidth', width)
+    }
+    // Set height of element
+  , height: function(height) {
+      return this.attr('markerHeight', height)
+    }
+    // Set marker refX and refY
+  , ref: function(x, y) {
+      return this.attr('refX', x).attr('refY', y)
+    }
+    // Update marker
+  , update: function(block) {
+      /* remove all content */
+      this.clear()
+      
+      /* invoke passed block */
+      if (typeof block == 'function')
+        block.call(this, this)
+      
+      return this
+    }
+    // Return the fill id
+  , toString: function() {
+      return 'url(#' + this.id() + ')'
+    }
+  }
+
+  // Add parent method
+, construct: {
+    marker: function(width, height, block) {
+      // Create marker element in defs
+      return this.defs().marker(width, height, block)
+    }
+  }
+
+})
+
+SVG.extend(SVG.Defs, {
+  // Create marker
+  marker: function(width, height, block) {
+    // Set default viewbox to match the width and height, set ref to cx and cy and set orient to auto
+    return this.put(new SVG.Marker)
+      .size(width, height)
+      .ref(width / 2, height / 2)
+      .viewbox(0, 0, width, height)
+      .attr('orient', 'auto')
+      .update(block)
+  }
+  
+})
+
+SVG.extend(SVG.Line, SVG.Polyline, SVG.Polygon, SVG.Path, {
+  // Create and attach markers
+  marker: function(marker, width, height, block) {
+    var attr = ['marker']
+
+    // Build attribute name
+    if (marker != 'all') attr.push(marker)
+    attr = attr.join('-')
+
+    // Set marker attribute
+    marker = arguments[1] instanceof SVG.Marker ?
+      arguments[1] :
+      this.doc().marker(width, height, block)
+    
+    return this.attr(attr, marker)
+  }
+  
+})
\ No newline at end of file
diff --git a/src/pattern.js b/src/pattern.js
index e5398d2..76190ef 100755
--- a/src/pattern.js
+++ b/src/pattern.js
@@ -9,7 +9,7 @@ SVG.Pattern = SVG.invent({
 , extend: {
     // Return the fill id
 	  fill: function() {
-	    return 'url(#' + this.attr('id') + ')'
+	    return 'url(#' + this.id() + ')'
 	  }
 	  // Update pattern by rebuilding
 	, update: function(block) {
diff --git a/src/regex.js b/src/regex.js
index 433952b..13f62d8 100755
--- a/src/regex.js
+++ b/src/regex.js
@@ -8,6 +8,9 @@ SVG.regex = {
   
   /* parse rgb value */
 , rgb:          /rgb\((\d+),(\d+),(\d+)\)/
+  
+  /* parse reference id */
+, reference:    /#([a-z0-9\-_]+)/i
 
   /* test hex value */
 , isHex:        /^#[a-f0-9]{3,6}$/i
diff --git a/src/selector.js b/src/selector.js
new file mode 100644
index 0000000..905e9f9
--- /dev/null
+++ b/src/selector.js
@@ -0,0 +1,5 @@
+// Method for getting an element by id
+SVG.get = function(id) {
+  var node = document.getElementById(idFromReference(id) || id)
+  if (node) return node.instance
+}
\ No newline at end of file
diff --git a/src/set.js b/src/set.js
index 38251f5..37246fe 100755
--- a/src/set.js
+++ b/src/set.js
@@ -52,6 +52,14 @@ SVG.Set = SVG.invent({
   , get: function(i) {
       return this.members[i]
     }
+    // Get first member
+  , first: function() {
+      return this.get(0)
+    }
+    // Get last member
+  , last: function() {
+      return this.get(this.members.length - 1)
+    }
     // Default value
   , valueOf: function() {
       return this.members
diff --git a/src/svg.js b/src/svg.js
index e0e5b44..eb0185d 100755
--- a/src/svg.js
+++ b/src/svg.js
@@ -55,12 +55,6 @@ SVG.extend = function() {
     SVG.Set.inherit()
 }
 
-// Method for getting an element by id
-SVG.get = function(id) {
-  var node = document.getElementById(id)
-  if (node) return node.instance
-}
-
 // Initialize parsing element
 SVG.prepare = function(element) {
   /* select document body and create invisible svg element */
diff --git a/src/symbol.js b/src/symbol.js
new file mode 100644
index 0000000..e8907a3
--- /dev/null
+++ b/src/symbol.js
@@ -0,0 +1,17 @@
+
+SVG.Symbol = SVG.invent({
+  // Initialize node
+  create: 'symbol'
+
+  // Inherit from
+, inherit: SVG.Container
+
+  // Add parent method
+, construct: {
+    // Create a new symbol
+    symbol: function() {
+      return this.defs().put(new SVG.Symbol)
+    }
+  }
+  
+})
\ No newline at end of file
diff --git a/src/text.js b/src/text.js
index 1d05362..1b6bd94 100755
--- a/src/text.js
+++ b/src/text.js
@@ -217,6 +217,10 @@ SVG.extend(SVG.Text, SVG.TSpan, {
     
     return this
   }
+  // Get length of text element
+, length: function() {
+    return this.node.getComputedTextLength()
+  }
 })
 
 // Register rebuild event