From 87c994d741ce3a4ad1d484d18bde82782164d1b8 Mon Sep 17 00:00:00 2001
From: DylanPaulusSEL <30325527+DylanPaulusSEL@users.noreply.github.com>
Date: Sun, 12 Aug 2018 16:24:36 -0700
Subject: [PATCH] Feature/add href parsing (#5156)

* Add href support for parsing use directives (svg)

* Add href support for parsing use directives (svg)

* Add href support for parsing use directives (svg)

* Fix linting errors

* add xlink:href test

* Update parser.js
---
 src/parser.js       |  5 +++--
 test/unit/parser.js | 34 ++++++++++++++++++++++++++++++++++
 2 files changed, 37 insertions(+), 2 deletions(-)

diff --git a/src/parser.js b/src/parser.js
index 82edc8abaaa..39e7fe1bc63 100644
--- a/src/parser.js
+++ b/src/parser.js
@@ -464,7 +464,7 @@
 
     while (nodelist.length && i < nodelist.length) {
       var el = nodelist[i],
-          xlink = el.getAttribute('xlink:href').substr(1),
+          xlink = (el.getAttribute('xlink:href') || el.getAttribute('href')).substr(1),
           x = el.getAttribute('x') || 0,
           y = el.getAttribute('y') || 0,
           el2 = elementById(doc, xlink).cloneNode(true),
@@ -487,7 +487,8 @@
 
       for (j = 0, attrs = el.attributes, len = attrs.length; j < len; j++) {
         attr = attrs.item(j);
-        if (attr.nodeName === 'x' || attr.nodeName === 'y' || attr.nodeName === 'xlink:href') {
+        if (attr.nodeName === 'x' || attr.nodeName === 'y' ||
+          attr.nodeName === 'xlink:href' || attr.nodeName === 'href') {
           continue;
         }
 
diff --git a/test/unit/parser.js b/test/unit/parser.js
index a90249b7f22..ef58d22f8d5 100644
--- a/test/unit/parser.js
+++ b/test/unit/parser.js
@@ -372,6 +372,40 @@
     });
   });
 
+  QUnit.test('parseSVGFromString with xlink:href', function(assert) {
+    var done = assert.async();
+    var string = '<?xml version="1.0" standalone="no"?><svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">' +
+                 '<defs><rect id="myrect" width="300" height="100" style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)"/></defs>' +
+                 '<use xlink:href="#myrect" x="50" y="50" ></use>' +
+                 '</svg>',
+        rect;
+
+    assert.ok(fabric.loadSVGFromString);
+
+    fabric.loadSVGFromString(string, function(objects) {
+      rect = objects[0];
+      assert.ok(rect instanceof fabric.Rect);
+      done();
+    });
+  });
+
+  QUnit.test('parseSVGFromString with href', function(assert) {
+    var done = assert.async();
+    var string = '<?xml version="1.0" standalone="no"?><svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">' +
+                 '<defs><rect id="myrect" width="300" height="100" style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)"/></defs>' +
+                 '<use href="#myrect" x="50" y="50" ></use>' +
+                 '</svg>',
+        rect;
+
+    assert.ok(fabric.loadSVGFromString);
+
+    fabric.loadSVGFromString(string, function(objects) {
+      rect = objects[0];
+      assert.ok(rect instanceof fabric.Rect);
+      done();
+    });
+  });
+
   QUnit.test('parseSVGFromString nested opacity', function(assert) {
     var done = assert.async();
     var string = '<?xml version="1.0" encoding="UTF-8"?>' +