Question

有没有办法向对象添加自定义属性并在导出的SVG上获取它们？

我用这种方式进行JSON导出。但它不适用于SVG出口。

canvas.item(0).foo = 'bar'; // custom property
var json = JSON.stringify(canvas.toJSON(['foo'])); // include that property in json
canvas.clear();
canvas.loadFromJSON(json);
canvas.item(0).foo; // "bar" <-- the property is preserved

当我使用canvas.toSVG（）导出画布时，不会导出自定义属性。

Answer 1

我一直在寻找这个问题的解决方案，我无法在网络上的任何地方找到它。所以我下载了最新版本的fabricjs并自行修改。最新版本的fabricjs将默认导出id。因此，我们可以修改代码的这一部分，从画布中导出所需的任何自定义属性。

在您的结构画布对象中，初始化所需的自定义属性类型。例如： my_canvas.custom_attribute_array = [＆＃34; room_id＆＃34;，＆＃34; class＆＃34;，＆＃34; id＆＃34;];

然后修改fabricjs getsvgId函数。

/**
 * Returns id attribute for svg output
 * @return {String}
 */
getSvgId: function() {
  if(this.canvas.custom_attribute_array){
    console.log(this.canvas.custom_attribute_array); 
    var custom_result = [];
    for(var i in this.canvas.custom_attribute_array){
        var custom_attribute = this.canvas.custom_attribute_array[i];
        if(this[custom_attribute]){
            var val =  this[custom_attribute];
            if(typeof val == "string"){
                val = '"'+val+'"';     
            }
            custom_result.push(custom_attribute + '=' + val); 
        }    
    }
    console.log(custom_result);
    if(custom_result){
        return custom_result.join(" ") + " ";   
    }
  }
  else{
    return this.id ? 'id="' + this.id + '" ' : '';
  }
},

Answer 2

您可以像这样覆盖现有的toSVG功能。

var circle = new fabric.Circle ({
          radius: 40,
          left: 50,
          top: 50,
          fill: 'rgb(0,255,0)',
          opacity: 0.5,
          id: 'hello'
    });
    circle.toSVG = (function(toSVG) {
      return function(){
        var svgString = toSVG.call(this);
        var domParser = new DOMParser();
        var doc = domParser.parseFromString(svgString, 'image/svg+xml');
        var parentG = doc.querySelector('circle')
        parentG.setAttribute('id', this.id);
        return doc.documentElement.outerHTML;
      }
      })(circle.toSVG)

如何在fabric.js中导出带有自定义属性的SVG？

2 个答案: