prefix all url() references with current location (#568)

the prefix is removed on export and added on import

CHANGELOG.md

@@ -38,6 +38,7 @@ The document follows the conventions described in [“Keep a CHANGELOG”](http:
 - new constructor signature for `SVG.Image` and `load()`: `container.image(src, callback) / image.load(src, callback)`
 - changed `style()` to `css()`. Now accepts array as input and returns object when no argument given (#517)
 - ids are not generated upon creation anymore. Instead they are generated when requested (#559)
+- prefix all `url()` references with current location so that nothing breaks when using `<base>`
 
 ### Fixed
 - fixed a bug in clipping and masking where empty nodes persists after removal -> __TODO!__

dist/svg.js

@@ -6,7 +6,7 @@
 * @copyright Wout Fierens <wout@mick-wout.com>
 * @license MIT
 *
-* BUILT: Sun Apr 23 2017 12:52:05 GMT+0200 (Mitteleuropäische Sommerzeit)
+* BUILT: Sun Apr 23 2017 15:09:13 GMT+0200 (Mitteleuropäische Sommerzeit)
 */;
 (function(root, factory) {
   /* istanbul ignore next */
@@ -212,6 +212,9 @@ SVG.regex = {
   // Test for image url
 , isImage:          /\.(jpg|jpeg|png|gif|svg)(\?[^=]+.*)?/i
 
+  // Test for url reference
+, isUrl:            /url\(([-\w:/]+(?:\.\w+)?)?#([-\w]+)\)/
+
   // split at whitespace and comma
 , delimiter:        /[\s,]+/
 
@@ -1232,6 +1235,8 @@ SVG.Element = SVG.invent({
         // dump raw svg
         well.innerHTML = svg
 
+        addPrefixToReferences(well)
+
         // transplant nodes
         for (len = well.childNodes.length;len--;)
           if(well.firstChild.nodeType != 1)
@@ -1241,6 +1246,7 @@ SVG.Element = SVG.invent({
 
       // otherwise act as a getter
       } else {
+        removePrefixFromReferences(this.node)
         return this.node.outerHTML
       }
 
@@ -3374,7 +3380,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.id() + '")')
+    return this.attr('mask', url(masker))
   }
   // Unmask element
 , unmask: function() {
@@ -3427,7 +3433,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.id() + '")')
+    return this.attr('clip-path', url(clipper))
   }
   // Unclip element
 , unclip: function() {
@@ -3466,7 +3472,7 @@ SVG.Gradient = SVG.invent({
     }
     // Return the fill id
   , fill: function() {
-      return 'url(#' + this.id() + ')'
+      return url(this)
     }
     // Alias string convertion to fill
   , toString: function() {
@@ -3554,7 +3560,7 @@ SVG.Pattern = SVG.invent({
 , extend: {
     // Return the fill id
     fill: function() {
-      return 'url(#' + this.id() + ')'
+      return url(this)
     }
     // Update pattern by rebuilding
   , update: function(block) {
@@ -4526,7 +4532,7 @@ SVG.Marker = SVG.invent({
     }
     // Return the fill id
   , toString: function() {
-      return 'url(#' + this.id() + ')'
+      return url(this)
     }
   }
 
@@ -4972,6 +4978,37 @@ function idFromReference(url) {
   if (m) return m[1]
 }
 
+// creates an url reference out of nodes id
+function url(node) {
+  return 'url(' + window.location + '#' + node.id() + ')'
+}
+
+function removePrefixFromReferences(node) {
+  for (var i = node.childNodes.length - 1; i >= 0; i--)
+    if (node.childNodes[i] instanceof window.SVGElement)
+      removePrefixFromReferences(node.childNodes[i])
+
+  var v = node.attributes, match
+  for (n = v.length - 1; n >= 0; n--) {
+    if(match = SVG.regex.isUrl.exec(v[n].nodeValue)) {
+      if(match[1] == window.location) v[n].nodeValue = 'url(#' + match[2] + ')'
+    }
+  }
+}
+
+function addPrefixToReferences(node) {
+  for (var i = node.childNodes.length - 1; i >= 0; i--)
+    if (node.childNodes[i] instanceof window.SVGElement)
+      addPrefixToReferences(node.childNodes[i])
+
+  var v = node.attributes, match
+  for (n = v.length - 1; n >= 0; n--) {
+    if(match = SVG.regex.isUrl.exec(v[n].nodeValue)) {
+      if(!match[1]) v[n].nodeValue = 'url(' + window.location + '#' + match[2] + ')'
+    }
+  }
+}
+
 // Create matrix array for looping
 var abcdef = 'abcdef'.split('')
 

spec/spec/clip.js

@@ -20,7 +20,7 @@ describe('ClipPath', function() {
   })
 
   it('sets the "clip-path" attribute on the cliped element with the clip id', function() {
-    expect(rect.attr('clip-path')).toBe('url("#' + circle.parent().id() + '")')
+    expect(rect.attr('clip-path')).toBe('url(' + window.location + '#' + circle.parent().id() + ')')
   })
 
   it('references the clip element in the masked element', function() {

spec/spec/gradient.js

@@ -29,7 +29,7 @@ describe('Gradient', function() {
 
   describe('fill()', function() {
     it('returns the id of the gradient wrapped in url()', function() {
-      expect(gradient.fill()).toBe('url(#' + gradient.id() + ')')
+      expect(gradient.fill()).toBe('url(' + window.location + '#' + gradient.id() + ')')
     })
   })
 
@@ -67,11 +67,11 @@ describe('Gradient', function() {
 
   describe('toString()', function() {
     it('returns the id of the gradient wrapped in url()', function() {
-      expect(gradient + '').toBe('url(#' + gradient.id() + ')')
+      expect(gradient + '').toBe('url(' + window.location + '#' + gradient.id() + ')')
     })
     it('is called when instance is passed as an attribute value', function() {
       rect.attr('fill', gradient)
-      expect(rect.attr('fill')).toBe('url(#' + gradient.id() + ')')
+      expect(rect.attr('fill')).toBe('url(' + window.location + '#' + gradient.id() + ')')
     })
   })
 

spec/spec/mask.js

@@ -20,7 +20,7 @@ describe('Mask', function() {
   })
 
   it('sets the "mask" attribute on the masked element with the mask id', function() {
-    expect(rect.attr('mask')).toBe('url("#' + circle.parent().id() + '")')
+    expect(rect.attr('mask')).toBe('url(' + window.location + '#' + circle.parent().id() + ')')
   })
 
   it('references the mask element in the masked element', function() {

spec/spec/pattern.js

@@ -25,7 +25,7 @@ describe('Pattern', function() {
 
   describe('fill()', function() {
     it('returns the id of the pattern wrapped in url()', function() {
-      expect(pattern.fill()).toBe('url(#' + pattern.id() + ')')
+      expect(pattern.fill()).toBe('url(' + window.location + '#' + pattern.id() + ')')
     })
   })
 
@@ -37,15 +37,15 @@ describe('Pattern', function() {
 
   describe('toString()', function() {
     it('returns the id of the pattern wrapped in url()', function() {
-      expect(pattern + '').toBe('url(#' + pattern.id() + ')')
+      expect(pattern + '').toBe('url(' + window.location + '#' + pattern.id() + ')')
     })
     it('is called when instance is passed as an attribute value', function() {
       rect.attr('fill', pattern)
-      expect(rect.attr('fill')).toBe('url(#' + pattern.id() + ')')
+      expect(rect.attr('fill')).toBe('url(' + window.location + '#' + pattern.id() + ')')
     })
     it('is called when instance is passed in a fill() method', function() {
       rect.fill(pattern)
-      expect(rect.attr('fill')).toBe('url(#' + pattern.id() + ')')
+      expect(rect.attr('fill')).toBe('url(' + window.location + '#' + pattern.id() + ')')
     })
   })
 

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.id() + '")')
+    return this.attr('clip-path', url(clipper))
   }
   // Unclip element
 , unclip: function() {

src/element.js

@@ -220,6 +220,8 @@ SVG.Element = SVG.invent({
         // dump raw svg
         well.innerHTML = svg
 
+        addPrefixToReferences(well)
+
         // transplant nodes
         for (len = well.childNodes.length;len--;)
           if(well.firstChild.nodeType != 1)
@@ -229,6 +231,7 @@ SVG.Element = SVG.invent({
 
       // otherwise act as a getter
       } else {
+        removePrefixFromReferences(this.node)
         return this.node.outerHTML
       }
 

src/gradient.js

@@ -26,7 +26,7 @@ SVG.Gradient = SVG.invent({
     }
     // Return the fill id
   , fill: function() {
-      return 'url(#' + this.id() + ')'
+      return url(this)
     }
     // Alias string convertion to fill
   , toString: function() {

src/helpers.js

@@ -185,5 +185,36 @@ function idFromReference(url) {
   if (m) return m[1]
 }
 
+// creates an url reference out of nodes id
+function url(node) {
+  return 'url(' + window.location + '#' + node.id() + ')'
+}
+
+function removePrefixFromReferences(node) {
+  for (var i = node.childNodes.length - 1; i >= 0; i--)
+    if (node.childNodes[i] instanceof window.SVGElement)
+      removePrefixFromReferences(node.childNodes[i])
+
+  var v = node.attributes, match
+  for (n = v.length - 1; n >= 0; n--) {
+    if(match = SVG.regex.isUrl.exec(v[n].nodeValue)) {
+      if(match[1] == window.location) v[n].nodeValue = 'url(#' + match[2] + ')'
+    }
+  }
+}
+
+function addPrefixToReferences(node) {
+  for (var i = node.childNodes.length - 1; i >= 0; i--)
+    if (node.childNodes[i] instanceof window.SVGElement)
+      addPrefixToReferences(node.childNodes[i])
+
+  var v = node.attributes, match
+  for (n = v.length - 1; n >= 0; n--) {
+    if(match = SVG.regex.isUrl.exec(v[n].nodeValue)) {
+      if(!match[1]) v[n].nodeValue = 'url(' + window.location + '#' + match[2] + ')'
+    }
+  }
+}
+
 // Create matrix array for looping
 var abcdef = 'abcdef'.split('')

src/marker.js

@@ -32,7 +32,7 @@ SVG.Marker = SVG.invent({
     }
     // Return the fill id
   , toString: function() {
-      return 'url(#' + this.id() + ')'
+      return url(this)
     }
   }
 

src/mask.js

@@ -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.id() + '")')
+    return this.attr('mask', url(masker))
   }
   // Unmask element
 , unmask: function() {

src/pattern.js

@@ -9,7 +9,7 @@ SVG.Pattern = SVG.invent({
 , extend: {
     // Return the fill id
     fill: function() {
-      return 'url(#' + this.id() + ')'
+      return url(this)
     }
     // Update pattern by rebuilding
   , update: function(block) {

src/regex.js

@@ -39,6 +39,9 @@ SVG.regex = {
   // Test for image url
 , isImage:          /\.(jpg|jpeg|png|gif|svg)(\?[^=]+.*)?/i
 
+  // Test for url reference
+, isUrl:            /url\(([-\w:/]+(?:\.\w+)?)?#([-\w]+)\)/
+
   // split at whitespace and comma
 , delimiter:        /[\s,]+/