From 83682b1d62febaca6190a132df2c8468fa5d48e1 Mon Sep 17 00:00:00 2001
From: Andrea Bogazzi <andreabogazzi79@gmail.com>
Date: Sun, 9 Dec 2018 23:13:27 +0100
Subject: [PATCH] various small svg fixes (#5424)

* various small svg fixes

* no debugger

* fontsize parsing fix - again

* added a visual test

* use min 9px

* added comment
---
 src/elements_parser.js                        |   2 +-
 src/parser.js                                 |  16 ++++++++++------
 src/shapes/path.class.js                      |   8 +++-----
 src/static_canvas.class.js                    |   6 +++---
 test/unit/path.js                             |   6 +++---
 test/visual/assets/svg_text_letterspacing.svg |   6 ++++++
 test/visual/golden/svg_text_letterspacing.png | Bin 0 -> 11234 bytes
 test/visual/svg_import.js                     |   1 +
 8 files changed, 27 insertions(+), 18 deletions(-)
 create mode 100644 test/visual/assets/svg_text_letterspacing.svg
 create mode 100644 test/visual/golden/svg_text_letterspacing.png

diff --git a/src/elements_parser.js b/src/elements_parser.js
index ad669abdf0d..ab2088be121 100644
--- a/src/elements_parser.js
+++ b/src/elements_parser.js
@@ -48,7 +48,7 @@ fabric.ElementsParser = function(elements, callback, options, reviver, parsingOp
       var _options;
       _this.resolveGradient(obj, 'fill');
       _this.resolveGradient(obj, 'stroke');
-      if (obj instanceof fabric.Image) {
+      if (obj instanceof fabric.Image && obj._originalElement) {
         _options = obj.parsePreserveAspectRatioAttribute(el);
       }
       obj._removeTransformMatrix(_options);
diff --git a/src/parser.js b/src/parser.js
index 203e5dcfcdd..2f0b5da96ac 100644
--- a/src/parser.js
+++ b/src/parser.js
@@ -85,9 +85,7 @@
         value = null;
       }
       else {
-        value = value.replace(/,/g, ' ').split(/\s+/).map(function(n) {
-          return parseFloat(n);
-        });
+        value = value.replace(/,/g, ' ').split(/\s+/).map(parseFloat);
       }
     }
     else if (attr === 'transformMatrix') {
@@ -130,6 +128,9 @@
         value = 'stroke';
       }
     }
+    else if (attr === 'href' || attr === 'xlink:href') {
+      return value;
+    }
     else {
       parsed = isArray ? value.map(parseUnit) : parseUnit(value, fontSize);
     }
@@ -821,7 +822,7 @@
 
       var value,
           parentAttributes = { },
-          fontSize;
+          fontSize, parentFontSize;
 
       if (typeof svgUid === 'undefined') {
         svgUid = element.getAttribute('svgUid');
@@ -843,8 +844,11 @@
       ownAttributes = extend(ownAttributes,
         extend(getGlobalStylesForElement(element, svgUid), fabric.parseStyleAttribute(element)));
 
-      fontSize = (parentAttributes && parentAttributes.fontSize ) ||
-                   ownAttributes['font-size'] || fabric.Text.DEFAULT_SVG_FONT_SIZE;
+      fontSize = parentFontSize = parentAttributes.fontSize || fabric.Text.DEFAULT_SVG_FONT_SIZE;
+      if (ownAttributes['font-size']) {
+        // looks like the minimum should be 9px when dealing with ems. this is what looks like in browsers.
+        ownAttributes['font-size'] = fontSize = parseUnit(ownAttributes['font-size'], parentFontSize);
+      }
 
       var normalizedAttr, normalizedValue, normalizedStyle = {};
       for (var attr in ownAttributes) {
diff --git a/src/shapes/path.class.js b/src/shapes/path.class.js
index d4b1b690c77..b9b4c142200 100644
--- a/src/shapes/path.class.js
+++ b/src/shapes/path.class.js
@@ -471,15 +471,13 @@
      * of the instance
      */
     _toSVG: function() {
-      var specificTransform = this._getOffsetTransform(),
-          path = this.path.map(function(path) {
-            return path.join(' ');
-          }).join(' ');
+      var path = this.path.map(function(path) {
+        return path.join(' ');
+      }).join(' ');
       return [
         '<path ', 'COMMON_PARTS',
         'd="', path,
         '" stroke-linecap="round" ',
-        'transform="' + specificTransform + '" ',
         '/>\n'
       ];
     },
diff --git a/src/static_canvas.class.js b/src/static_canvas.class.js
index 9e05f8d50fc..caf4d941521 100644
--- a/src/static_canvas.class.js
+++ b/src/static_canvas.class.js
@@ -390,6 +390,7 @@
      *   crossOrigin: 'anonymous'
      * });
      */
+    // TODO: fix stretched examples
     setBackgroundImage: function (image, callback, options) {
       return this.__setBgOverlayImage('backgroundImage', image, callback, options);
     },
@@ -1293,12 +1294,11 @@
 
       this._setSVGPreamble(markup, options);
       this._setSVGHeader(markup, options);
-
-      this._setSVGBgOverlayColor(markup, 'backgroundColor');
-      this._setSVGBgOverlayImage(markup, 'backgroundImage', reviver);
       if (this.clipPath) {
         markup.push('<g clip-path="url(#' + this.clipPath.clipPathId + ')" >\n');
       }
+      this._setSVGBgOverlayColor(markup, 'backgroundColor');
+      this._setSVGBgOverlayImage(markup, 'backgroundImage', reviver);
       this._setSVGObjects(markup, reviver);
       if (this.clipPath) {
         markup.push('</g>\n');
diff --git a/test/unit/path.js b/test/unit/path.js
index d08fbccaddd..57cf61033a2 100644
--- a/test/unit/path.js
+++ b/test/unit/path.js
@@ -129,7 +129,7 @@
     var done = assert.async();
     makePathObject(function(path) {
       assert.ok(typeof path.toSVG === 'function');
-      assert.deepEqual(path.toSVG(), '<g transform=\"matrix(1 0 0 1 200.5 200.5)\"  >\n<path style=\"stroke: rgb(0,0,255); stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(255,0,0); fill-rule: nonzero; opacity: 1;\"  d=\"M 100 100 L 300 100 L 200 300 z\" stroke-linecap=\"round\" transform=\" translate(-200, -200)\" />\n</g>\n');
+      assert.deepEqual(path.toSVG(), '<g transform=\"matrix(1 0 0 1 200.5 200.5)\"  >\n<path style=\"stroke: rgb(0,0,255); stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(255,0,0); fill-rule: nonzero; opacity: 1;\"  d=\"M 100 100 L 300 100 L 200 300 z\" stroke-linecap=\"round\" />\n</g>\n');
       done();
     });
   });
@@ -139,7 +139,7 @@
     makePathObject(function(path) {
       makePathObject(function(path2) {
         path.clipPath = path2;
-        assert.deepEqual(path.toSVG(), '<g transform=\"matrix(1 0 0 1 200.5 200.5)\" clip-path=\"url(#CLIPPATH_0)\"  >\n<clipPath id=\"CLIPPATH_0\" >\n\t<path transform=\"matrix(1 0 0 1 200.5 200.5) translate(-200, -200)\" d=\"M 100 100 L 300 100 L 200 300 z\" stroke-linecap=\"round\" transform=\" translate(-200, -200)\" />\n</clipPath>\n<path style=\"stroke: rgb(0,0,255); stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(255,0,0); fill-rule: nonzero; opacity: 1;\"  d=\"M 100 100 L 300 100 L 200 300 z\" stroke-linecap=\"round\" transform=\" translate(-200, -200)\" />\n</g>\n', 'path clipPath toSVG should match');
+        assert.deepEqual(path.toSVG(), '<g transform=\"matrix(1 0 0 1 200.5 200.5)\" clip-path=\"url(#CLIPPATH_0)\"  >\n<clipPath id=\"CLIPPATH_0\" >\n\t<path transform=\"matrix(1 0 0 1 200.5 200.5) translate(-200, -200)\" d=\"M 100 100 L 300 100 L 200 300 z\" stroke-linecap=\"round\" />\n</clipPath>\n<path style=\"stroke: rgb(0,0,255); stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(255,0,0); fill-rule: nonzero; opacity: 1;\"  d=\"M 100 100 L 300 100 L 200 300 z\" stroke-linecap=\"round\" />\n</g>\n', 'path clipPath toSVG should match');
         done();
       });
     });
@@ -152,7 +152,7 @@
       makePathObject(function(path2) {
         path.clipPath = path2;
         path.clipPath.absolutePositioned = true;
-        assert.deepEqual(path.toSVG(), '<g clip-path=\"url(#CLIPPATH_0)\"  >\n<g transform=\"matrix(1 0 0 1 200.5 200.5)\"  >\n<clipPath id=\"CLIPPATH_0\" >\n\t<path transform=\"matrix(1 0 0 1 200.5 200.5) translate(-200, -200)\" d=\"M 100 100 L 300 100 L 200 300 z\" stroke-linecap=\"round\" transform=\" translate(-200, -200)\" />\n</clipPath>\n<path style=\"stroke: rgb(0,0,255); stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(255,0,0); fill-rule: nonzero; opacity: 1;\"  d=\"M 100 100 L 300 100 L 200 300 z\" stroke-linecap=\"round\" transform=\" translate(-200, -200)\" />\n</g>\n</g>\n', 'path clipPath toSVG absolute should match');
+        assert.deepEqual(path.toSVG(), '<g clip-path=\"url(#CLIPPATH_0)\"  >\n<g transform=\"matrix(1 0 0 1 200.5 200.5)\"  >\n<clipPath id=\"CLIPPATH_0\" >\n\t<path transform=\"matrix(1 0 0 1 200.5 200.5) translate(-200, -200)\" d=\"M 100 100 L 300 100 L 200 300 z\" stroke-linecap=\"round\" />\n</clipPath>\n<path style=\"stroke: rgb(0,0,255); stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(255,0,0); fill-rule: nonzero; opacity: 1;\"  d=\"M 100 100 L 300 100 L 200 300 z\" stroke-linecap=\"round\" />\n</g>\n</g>\n', 'path clipPath toSVG absolute should match');
         done();
       });
     });
diff --git a/test/visual/assets/svg_text_letterspacing.svg b/test/visual/assets/svg_text_letterspacing.svg
new file mode 100644
index 00000000000..a1261a9d348
--- /dev/null
+++ b/test/visual/assets/svg_text_letterspacing.svg
@@ -0,0 +1,6 @@
+<svg height="200" width="400" xmlns="http://www.w3.org/2000/svg" version="1.1">
+<text x="0" y="30" style="font-size: 20px; letter-spacing: 20px">Letter-spacing in 'px'</text>
+<text x="0" y="70" style="font-size: 20px; letter-spacing: 0.5em">Letter-spacing in 'em'</text>
+<text x="0" y="100" style="font-size: 0.6em; letter-spacing: 0.5em">Letter-spacing in 'em' font-size in 'em'</text>
+<text x="0" y="140" style="letter-spacing: 0.5em">Letter-spacing in 'em' no font-size</text>
+</svg>
diff --git a/test/visual/golden/svg_text_letterspacing.png b/test/visual/golden/svg_text_letterspacing.png
new file mode 100644
index 0000000000000000000000000000000000000000..65159dcdac7a73d1753f379a9db1297fb07839fd
GIT binary patch
literal 11234
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

literal 0
HcmV?d00001

diff --git a/test/visual/svg_import.js b/test/visual/svg_import.js
index 6192f3aae51..2313dd0b76b 100644
--- a/test/visual/svg_import.js
+++ b/test/visual/svg_import.js
@@ -72,6 +72,7 @@
     'svg_radial_11',
     'svg_radial_12',
     'svg_radial_13',
+    'svg_text_letterspacing',
   ].map(createTestFromSVG);
 
   tests.forEach(visualTestLoop(fabricCanvas, QUnit));