add a simple toSVG export for clipPath text (fabricjs#5591)

thiagocunha · Mar 24, 2019 · 2552f39 · 2552f39
1 parent 7441458
commit 2552f39
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 6 deletions.
diff --git 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
@@ -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
@@ -53,7 +53,16 @@
         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) {
+    fabric.Object.NUM_FRACTION_DIGITS = 0;
+    fabric.Object.__uid = 0;
+    var EXPECTED = '<g transform=\"\" clip-path=\"url(#CLIPPATH_0)\"  >\n<clipPath id=\"CLIPPATH_0\" >\n\t\t\t<text xml:space=\"preserve\" font-family=\"Times New Roman\" font-size=\"40\" font-style=\"normal\" font-weight=\"normal\" style=\"stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(0,0,0); fill-rule: nonzero; opacity: 1; white-space: pre;\" ><tspan x=\"-122\" y=\"13\" >text as clipPath</tspan></text>\n</clipPath>\n<rect style=\"stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(0,0,0); fill-rule: nonzero; opacity: 1;\"  x=\"-100\" y=\"-50\" rx=\"0\" ry=\"0\" width=\"200\" height=\"100\" />\n</g>\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));
+    fabric.Object.NUM_FRACTION_DIGITS = 2;
+  });
 })();