From 77862ef41cc7b8c3eb471f675457819e7f00556a Mon Sep 17 00:00:00 2001
From: Andrea Bogazzi <andreabogazzi79@gmail.com>
Date: Sun, 1 Apr 2018 20:39:49 +0200
Subject: [PATCH] fix the parsing of the URL part of a property. (#4881)

* fix gradient parse url

* added test

* fix lint
---
 src/elements_parser.js |  6 ++++--
 src/gradient.class.js  |  1 -
 src/parser.js          |  1 -
 test/unit/parser.js    | 25 +++++++++++++++++++++++++
 4 files changed, 29 insertions(+), 4 deletions(-)

diff --git a/src/elements_parser.js b/src/elements_parser.js
index 6be9d189748..7a212ba048c 100644
--- a/src/elements_parser.js
+++ b/src/elements_parser.js
@@ -5,6 +5,7 @@ fabric.ElementsParser = function(elements, callback, options, reviver, parsingOp
   this.reviver = reviver;
   this.svgUid = (options && options.svgUid) || 0;
   this.parsingOptions = parsingOptions;
+  this.regexUrl = /^url\(['"]?#([^'"]+)['"]?\)/g;
 };
 
 fabric.ElementsParser.prototype.parse = function() {
@@ -62,11 +63,12 @@ fabric.ElementsParser.prototype.createCallback = function(index, el) {
 
 fabric.ElementsParser.prototype.resolveGradient = function(obj, property) {
 
-  var instanceFillValue = obj.get(property);
+  var instanceFillValue = obj[property];
   if (!(/^url\(/).test(instanceFillValue)) {
     return;
   }
-  var gradientId = instanceFillValue.slice(5, instanceFillValue.length - 1);
+  var gradientId = this.regexUrl.exec(instanceFillValue)[1];
+  this.regexUrl.lastIndex = 0;
   if (fabric.gradientDefs[this.svgUid][gradientId]) {
     obj.set(property,
       fabric.Gradient.fromElement(fabric.gradientDefs[this.svgUid][gradientId], obj));
diff --git a/src/gradient.class.js b/src/gradient.class.js
index a3bfa35efef..9a2bda25c39 100644
--- a/src/gradient.class.js
+++ b/src/gradient.class.js
@@ -309,7 +309,6 @@
      * @see http://www.w3.org/TR/SVG/pservers.html#RadialGradientElement
      */
     fromElement: function(el, instance) {
-
       /**
        *  @example:
        *
diff --git a/src/parser.js b/src/parser.js
index ba13f9e537d..5cf70afb938 100644
--- a/src/parser.js
+++ b/src/parser.js
@@ -743,7 +743,6 @@
           elList = _getMultipleNodes(doc, tagArray),
           el, j = 0, id, xlink,
           gradientDefs = { }, idsToXlinkMap = { };
-
       j = elList.length;
 
       while (j--) {
diff --git a/test/unit/parser.js b/test/unit/parser.js
index 4b8cc705701..a90249b7f22 100644
--- a/test/unit/parser.js
+++ b/test/unit/parser.js
@@ -347,6 +347,31 @@
     });
   });
 
+  QUnit.test('parseSVGFromString with gradient and fill url with quotes', function(assert) {
+    var done = assert.async();
+    var string = '<?xml version="1.0" encoding="utf-8"?>' +
+    '<svg viewBox="0 0 1400 980" xmlns="http://www.w3.org/2000/svg" width="1400px" height="980px" version="1.1" >' +
+    '<linearGradient id="SVGID_11_" gradientUnits="userSpaceOnUse" x1="702.4817" y1="66.4817" x2="825.5183" y2="189.5183">' +
+    '<stop offset="0" style="stop-color:#FBB03B"/>' +
+    '<stop offset="0.2209" style="stop-color:#FBAC3A"/>' +
+    '<stop offset="0.4348" style="stop-color:#F9A037"/>' +
+    '<stop offset="0.6458" style="stop-color:#F78D32"/>' +
+    '<stop offset="0.8538" style="stop-color:#F4722A"/>' +
+    '<stop offset="1" style="stop-color:#F15A24"/>' +
+    '</linearGradient>' +
+    '<path d="M 851 128 A 87 87 0 0 1 764 215 A 87 87 0 0 1 677 128 A 87 87 0 0 1 764 41 A 87 87 0 0 1 851 128 Z" class="st13" style="fill: url(\'#SVGID_11_\');"/>' +
+    '<path d="M 851 128 A 87 87 0 0 1 764 215 A 87 87 0 0 1 677 128 A 87 87 0 0 1 764 41 A 87 87 0 0 1 851 128 Z" class="st13" style="fill: url(#SVGID_11_);"/>' +
+    '<path d="M 851 128 A 87 87 0 0 1 764 215 A 87 87 0 0 1 677 128 A 87 87 0 0 1 764 41 A 87 87 0 0 1 851 128 Z" class="st13" style=\'fill: url("#SVGID_11_");\'/>' +
+    '</svg>';
+
+    fabric.loadSVGFromString(string, function(objects) {
+      assert.equal(objects[0].fill.type, 'linear', 'first path has gradient');
+      assert.equal(objects[1].fill.type, 'linear', 'second path has gradient');
+      assert.equal(objects[2].fill.type, 'linear', 'second path has gradient');
+      done();
+    });
+  });
+
   QUnit.test('parseSVGFromString nested opacity', function(assert) {
     var done = assert.async();
     var string = '<?xml version="1.0" encoding="UTF-8"?>' +