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
fabricjs · Aug 12, 2018 · 87c994d · 87c994d
1 parent 8c3f677
commit 87c994d
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 2 deletions.
diff --git 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
@@ -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"?>' +