Exportieren von benutzerdefinierten Eigenschaften aus fabricjs Objekte in SVG

Question

Ich habe ein Bildobjekt, wo ich eine benutzerdefinierte Eigenschaft hinzugefügt habe. Wenn ich das Objekt zeichne, kann ich sehen, dass die Eigenschaft dort ist, aber wenn ich den SVG mithilfe von toSVG exportiere, ist die benutzerdefinierte Eigenschaft nicht in der SVG-Quelle.

würde ich die Namen Eigenschaft in meinem Beispiel gerne als benutzerdefinierte Eigenschaft in den SVG-Datei XML-Daten exportiert werden, um dies möglich

ist (mit der Möglichkeit, mehrere Eigenschaften hinzufügen)?

Bitte se meine Geige: https://jsfiddle.net/Jonah/ujexg46s/

var svgImage = fabric.util.createClass(fabric.Image, { 
    initialize: function(element, options) { 
    this.callSuper("initialize", element, options); 
    options && this.set("name", options.name); 
    }, 
    toObject: function() { 
    return fabric.util.object.extend(this.callSuper('toObject'), { 
     name: this.name 
    }); 
    } 
}); 

var canvas = new fabric.Canvas('container'); 

function loadImage() { 
    var img = new Image(); 
    img.src = imageSrc; 
    img.onload = function() { 
    var image = new svgImage(img, { 
     name: "test", 
     left: 0, 
     top: 0 
    }); 
    canvas.add(image); 
    } 

} 

document.getElementById('load-btn').onclick = function() { 
    loadImage(); 
}; 

document.getElementById('export-btn').onclick = function() { 
    canvas.deactivateAll().renderAll(); 
    console.log(JSON.stringify(canvas)); 
    window.open('data:image/svg+xml;utf8,' + encodeURIComponent(canvas.toSVG())); 

}; 

Answer 1

You can find answer here. 
fabric.util.object.extend(fabric.Image.prototype, { 
    toObject: function(propertiesToInclude) { 
     return fabric.util.object.extend(this.callSuper('toObject', propertiesToInclude), { 
      src: this._originalElement.src || this._originalElement._src, 
      filters: this.filters.map(function(filterObj) { 
       return filterObj && filterObj.toObject(); 
      }), 
      crossOrigin: this.crossOrigin, 
      alignX: this.alignX, 
      alignY: this.alignY, 
      meetOrSlice: this.meetOrSlice, 
      name: this.name 
     }); 
    }, 
}); 

https://jsfiddle.net/mullainathan/ujexg46s/1/