fix the parsing of the URL part of a property. (#4881)

* fix gradient parse url * added test * fix lint
fabricjs · Apr 1, 2018 · 77862ef · 77862ef
1 parent 24a97a3
commit 77862ef
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 4 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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"?>' +
-Original file line number
+Diff line change
@@ Expand Up / @@ -309,7 +309,6 @@ @@
          * @see http://www.w3.org/TR/SVG/pservers.html#RadialGradientElement
          */
         fromElement: function(el, instance) {
           /**
            *  @example:
            *
@@ Expand Down @@