export to svg

fabricjs · Apr 29, 2021 · 1257489 · 1257489
1 parent 7fe1d1e
commit 1257489
Showing 1 changed file with 43 additions and 4 deletions.
diff --git a/src/mixins/eraser_brush.mixin.js b/src/mixins/eraser_brush.mixin.js
@@ -99,7 +99,8 @@
     },
   });
 
-  var toObject = fabric.Object.prototype.toObject;
+  var _toObject = fabric.Object.prototype.toObject;
+  var _toSVG = fabric.Object.prototype.toSVG;
   fabric.util.object.extend(fabric.Object.prototype, {
     /**
      * Indicates whether this object can be erased by {@link fabric.EraserBrush}
@@ -122,19 +123,57 @@
      * @return {Object} Object representation of an instance
      */
     toObject: function (additionalProperties) {
-      return toObject.call(this, ['erasable'].concat(additionalProperties));
+      return _toObject.call(this, ['erasable'].concat(additionalProperties));
+    },
+
+    /**
+     * use <mask> to achieve erasing for svg
+     * @param {Function} reviver 
+     * @returns {string} markup
+     */
+    eraserToSVG: function (reviver) {
+      var eraser = this.getEraser();
+      if (eraser) {
+        var fill = eraser._objects[0].fill;
+        eraser._objects[0].fill = 'white';
+        eraser.clipPathId = 'CLIPPATH_' + fabric.Object.__uid++;
+        var objectMarkup = ['<defs>', '<mask id="' + eraser.clipPathId + '" >', eraser.toSVG(reviver), '</mask>', '</defs>'];
+        eraser._objects[0].fill = fill;
+        return objectMarkup.join('\n');
+      }
+      return '';
+    },
+
+    /**
+     * use <mask> to achieve erasing for svg
+     * @param {Function} reviver
+     * @returns {string} markup
+     */
+    toSVG: function (reviver) {
+      var eraser = this.getEraser();
+      if (eraser) {
+        var eraserMarkup = this.eraserToSVG(reviver);
+        this.clipPath = null;
+        var markup = _toSVG.call(this, function (markup) {
+          return markup.replace('>', 'mask="url(#' + eraser.clipPathId + ')" >');
+        });
+        this.clipPath = eraser;
+        return [eraserMarkup, markup].join('\n');
+      } else {
+        return _toSVG.call(this, reviver);
+      }
     }
   });
 
-  var groupToObject = fabric.Group.prototype.toObject;
+  var _groupToObject = fabric.Group.prototype.toObject;
   fabric.util.object.extend(fabric.Group.prototype, {
     /**
      * Returns an object representation of an instance
      * @param {Array} [propertiesToInclude] Any properties that you might want to additionally include in the output
      * @return {Object} Object representation of an instance
      */
     toObject: function (additionalProperties) {
-      return groupToObject.call(this, ['eraser'].concat(additionalProperties));
+      return _groupToObject.call(this, ['eraser'].concat(additionalProperties));
     }
   });