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 [ '\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('\n'); } + this._setSVGBgOverlayColor(markup, 'backgroundColor'); + this._setSVGBgOverlayImage(markup, 'backgroundImage', reviver); this._setSVGObjects(markup, reviver); if (this.clipPath) { markup.push('\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(), '\n\n\n'); + assert.deepEqual(path.toSVG(), '\n\n\n'); done(); }); }); @@ -139,7 +139,7 @@ makePathObject(function(path) { makePathObject(function(path2) { path.clipPath = path2; - assert.deepEqual(path.toSVG(), '\n\n\t\n\n\n\n', 'path clipPath toSVG should match'); + assert.deepEqual(path.toSVG(), '\n\n\t\n\n\n\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(), '\n\n\n\t\n\n\n\n\n', 'path clipPath toSVG absolute should match'); + assert.deepEqual(path.toSVG(), '\n\n\n\t\n\n\n\n\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 @@ + +Letter-spacing in 'px' +Letter-spacing in 'em' +Letter-spacing in 'em' font-size in 'em' +Letter-spacing in 'em' no font-size + diff --git a/test/visual/golden/svg_text_letterspacing.png b/test/visual/golden/svg_text_letterspacing.png new file mode 100644 index 00000000000..65159dcdac7 Binary files /dev/null and b/test/visual/golden/svg_text_letterspacing.png differ 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));