將fabricjs對象的自定義屬性導出到SVG

我有一個圖像對象，我添加了一個自定義屬性。當對對象進行字符串化時，我可以看到該屬性在那裏，但是當我使用toSVG導出SVG時，該自定義屬性不在SVG源中。將fabricjs對象的自定義屬性導出到SVG

我想在我的例子name屬性導出爲在SVG圖像的XML數據的自定義屬性（有可能添加多個屬性）

這可能嗎？

請SE我的小提琴：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())); 

};

來源

2016-11-09 Jonah

也許@kangax可以提供一些線索在這個？ :) – Jonah

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/

來源

2016-11-14 11:19:09 Mullainathan

不，這是行不通的。查看svg源代碼，我找不到具有值test的屬性名稱。 svg的來源和我的小提琴一樣。 – Jonah

將fabricjs對象的自定義屬性導出到SVG

回答

相關問題