From 5347465c78df5f9993d75143489dd7bac4aa0e98 Mon Sep 17 00:00:00 2001 From: Andrea Bogazzi Date: Sun, 24 Mar 2019 12:42:27 +0100 Subject: [PATCH 1/5] add a simple toSVG export for clipPath text --- src/mixins/itext.svg_export.js | 18 ++++++++++++++---- src/shapes/group.class.js | 17 ++++++++++++++++- test/unit/text_to_svg.js | 9 ++++++++- 3 files changed, 38 insertions(+), 6 deletions(-) diff --git a/src/mixins/itext.svg_export.js b/src/mixins/itext.svg_export.js index 5be8ec34586..5d8f7a63c25 100644 --- a/src/mixins/itext.svg_export.js +++ b/src/mixins/itext.svg_export.js @@ -10,12 +10,22 @@ * @param {Function} [reviver] Method for further parsing of svg representation. * @return {String} svg representation of an instance */ - toSVG: function(reviver) { + _toSVG: function() { var offsets = this._getSVGLeftTopOffsets(), - textAndBg = this._getSVGTextAndBg(offsets.textTop, offsets.textLeft), - internalMarkup = this._wrapSVGTextAndBg(textAndBg); + textAndBg = this._getSVGTextAndBg(offsets.textTop, offsets.textLeft); + return this._wrapSVGTextAndBg(textAndBg); + }, + + /** + * Returns svg representation of an instance + * @param {Function} [reviver] Method for further parsing of svg representation. + * @return {String} svg representation of an instance + */ + toSVG: function(reviver) { return this._createBaseSVGMarkup( - internalMarkup, { reviver: reviver, noStyle: true, withShadow: true }); + this._toSVG(), + { reviver: reviver, noStyle: true, withShadow: true } + ); }, /** diff --git a/src/shapes/group.class.js b/src/shapes/group.class.js index 4d91dbb6acf..5eae245d77f 100644 --- a/src/shapes/group.class.js +++ b/src/shapes/group.class.js @@ -526,10 +526,25 @@ } return this._createBaseSVGMarkup( - svgString, + this._toSVG(), { reviver: reviver, noStyle: true, withShadow: true }); }, + /** + * Returns svg representation of an instance + * @param {Function} [reviver] Method for further parsing of svg representation. + * @return {String} svg representation of an instance + */ + _toSVG: function(reviver) { + var svgString = []; + + for (var i = 0, len = this._objects.length; i < len; i++) { + svgString.push('\t', this._objects[i].toSVG(reviver)); + } + + return svgString; + }, + /** * Returns svg clipPath representation of an instance * @param {Function} [reviver] Method for further parsing of svg representation. diff --git a/test/unit/text_to_svg.js b/test/unit/text_to_svg.js index 2ca9a269ef4..4cbfcf0afc2 100644 --- a/test/unit/text_to_svg.js +++ b/test/unit/text_to_svg.js @@ -53,7 +53,14 @@ 5: {fontFamily: 'Times New Roman'} }} }); - assert.equal(removeTranslate(text.toSVG()), removeTranslate(TEXT_SVG_WITH_FONT)); }); + QUnit.test('toSVG with text as a clipPath', function(assert) { + var EXPECTED = '\n\n\t\t\ttext as clipPath\n\n\n\n'; + var clipPath = new fabric.Text('text as clipPath'); + var rect = new fabric.Rect({ width: 200, height: 100 }); + rect.clipPath = clipPath; + + assert.equal(removeTranslate(rect.toSVG()), removeTranslate(EXPECTED)); + }); })(); From 73c1c4327b0e4ca9e860008ff31546e419228857 Mon Sep 17 00:00:00 2001 From: Andrea Bogazzi Date: Sun, 24 Mar 2019 12:46:35 +0100 Subject: [PATCH 2/5] reser value of id in test --- test/unit/text_to_svg.js | 1 + 1 file changed, 1 insertion(+) diff --git a/test/unit/text_to_svg.js b/test/unit/text_to_svg.js index 4cbfcf0afc2..21d6071619a 100644 --- a/test/unit/text_to_svg.js +++ b/test/unit/text_to_svg.js @@ -56,6 +56,7 @@ assert.equal(removeTranslate(text.toSVG()), removeTranslate(TEXT_SVG_WITH_FONT)); }); QUnit.test('toSVG with text as a clipPath', function(assert) { + fabric.Object.__uid = 0; var EXPECTED = '\n\n\t\t\ttext as clipPath\n\n\n\n'; var clipPath = new fabric.Text('text as clipPath'); var rect = new fabric.Rect({ width: 200, height: 100 }); From 1d4c9f7c071424381ae20377762dda3700fbfeb9 Mon Sep 17 00:00:00 2001 From: Andrea Bogazzi Date: Sun, 24 Mar 2019 13:03:37 +0100 Subject: [PATCH 3/5] ok less precision --- test/unit/text_to_svg.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/test/unit/text_to_svg.js b/test/unit/text_to_svg.js index 21d6071619a..7562b2418e1 100644 --- a/test/unit/text_to_svg.js +++ b/test/unit/text_to_svg.js @@ -56,12 +56,13 @@ assert.equal(removeTranslate(text.toSVG()), removeTranslate(TEXT_SVG_WITH_FONT)); }); QUnit.test('toSVG with text as a clipPath', function(assert) { + fabric.Object.NUM_FRACTION_DIGITS = 0; fabric.Object.__uid = 0; var EXPECTED = '\n\n\t\t\ttext as clipPath\n\n\n\n'; var clipPath = new fabric.Text('text as clipPath'); var rect = new fabric.Rect({ width: 200, height: 100 }); rect.clipPath = clipPath; - + fabric.Object.NUM_FRACTION_DIGITS = 2; assert.equal(removeTranslate(rect.toSVG()), removeTranslate(EXPECTED)); }); })(); From 7f37a626dfcdef592e0fb0ca64a85844c6164e64 Mon Sep 17 00:00:00 2001 From: Andrea Bogazzi Date: Sun, 24 Mar 2019 15:12:30 +0100 Subject: [PATCH 4/5] meh --- test/unit/text_to_svg.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/test/unit/text_to_svg.js b/test/unit/text_to_svg.js index 7562b2418e1..e47e8739b8d 100644 --- a/test/unit/text_to_svg.js +++ b/test/unit/text_to_svg.js @@ -62,7 +62,7 @@ var clipPath = new fabric.Text('text as clipPath'); var rect = new fabric.Rect({ width: 200, height: 100 }); rect.clipPath = clipPath; - fabric.Object.NUM_FRACTION_DIGITS = 2; assert.equal(removeTranslate(rect.toSVG()), removeTranslate(EXPECTED)); + fabric.Object.NUM_FRACTION_DIGITS = 2; }); })(); From fe5ec084a006ddeba3bf37707f48a2535905de3f Mon Sep 17 00:00:00 2001 From: Andrea Bogazzi Date: Sun, 24 Mar 2019 17:44:48 +0100 Subject: [PATCH 5/5] no roundings --- test/unit/text_to_svg.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/test/unit/text_to_svg.js b/test/unit/text_to_svg.js index e47e8739b8d..4f4300f48ef 100644 --- a/test/unit/text_to_svg.js +++ b/test/unit/text_to_svg.js @@ -58,7 +58,7 @@ QUnit.test('toSVG with text as a clipPath', function(assert) { fabric.Object.NUM_FRACTION_DIGITS = 0; fabric.Object.__uid = 0; - var EXPECTED = '\n\n\t\t\ttext as clipPath\n\n\n\n'; + var EXPECTED = '\n\n\t\t\ttext as clipPath\n\n\n\n'; var clipPath = new fabric.Text('text as clipPath'); var rect = new fabric.Rect({ width: 200, height: 100 }); rect.clipPath = clipPath;