将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

回答

相关问题