fabricjs-扩展到SVG以导出自定义属性

Question

根据this part of the doc，可以扩展toSVG()方法以导出自定义属性。不幸的是，目前尚不清楚我们是否应该覆盖toSVG()本身，还是应该覆盖toObject()方法。

我的问题是，我已经使用了这段代码

fabric.SHARED_ATTRIBUTES.push('class')
fabric.Path.ATTRIBUTE_NAMES.push('class')
fabric.Image.ATTRIBUTE_NAMES.push('class')

这样我导入的SVG对象将具有CSS类。不幸的是，使用toSVG()时，在生成的SVG中找不到这些类，因此会导致this kind of non-blended SVGs（如果将CSS mix-blend-mode的CSS属性设置为'multiply' paths，您会看到正确的图像。

如何调整toSVG()，以便将class属性导出到我的SVG中？我是否需要为导入的SVG中的每个对象修改toSVG()方法？

Answer 1

您需要从每个要添加此额外信息的类扩展_toSVG方法。 这是fabric.Path

的示例

var site_url = 'http://s3.eu-central-1.amazonaws.com/balibart-s3/SVGMockups2/59f32980b5d8493ef7f29904/front/Layer.svg';

fabric.SHARED_ATTRIBUTES.push('class')
fabric.Path.ATTRIBUTE_NAMES.push('class')
fabric.Image.ATTRIBUTE_NAMES.push('class')



fabric.Path.prototype._toSVG = (function(_toSVG){
return function(){
	var svg = _toSVG.call(this);
  
  if(this.class){
     svg.splice(1,0,this.class+'" ');
      svg.splice(1,0,'class="');
  }
  return svg;
}
})(fabric.Path.prototype._toSVG)



canvas = new fabric.Canvas('canvas');
fabric.loadSVGFromString($('#textareaId').val(), function(objects, options) {

  var group = new fabric.Group(objects, {
    left: 165,
    top: 100,
    
  });
  canvas.add(group);
  
  canvas.renderAll();
  console.log(canvas.toSVG());
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.4.6/fabric.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<canvas id='canvas' width="900" height="300"></canvas>
<textarea rows="4" cols="50" id="textareaId">
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 22.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 width="100px" height="200px" viewBox="0 0 100 200" style="enable-background:new 0 0 100 200;" xml:space="preserve">
<style type="text/css">
	.st0{fill:#8DC63F;}
	
</style>
<g xmlns="http://www.w3.org/2000/svg" transform="matrix(1 0 0 1 0.006507237105 4.339693398719)" id="Path-2 back">
<path class="st1" style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(105,130,165); fill-rule: nonzero; opacity: 1;" transform=" translate(-499.991507237105, -504.294693398719)" d="M 132 374.47 c 2.83 -8.49 8.24 -16.11 12.09 -24 c 3.94 -8.12 8.42 -16 12.26 -24.14 c 5.49 -11.66 11.3 -23.16 17.19 -34.61 c 5.11 -9.92 9.87 -20 15.12 -29.87 c 4.32 -8.12 8.23 -16.44 12.49 -24.58 c 6.05 -11.54 12.13 -23.07 18.37 -34.51 c 3.44 -6.31 7.58 -12.22 11.26 -18.39 a 78.8 78.8 0 0 1 10 -13.64 a 55.62 55.62 0 0 1 9.49 -7.8 c 15.37 -10.42 31.13 -20.23 47.07 -29.73 a 394.42 394.42 0 0 1 40.24 -20.5 c 10.29 -4.63 20.46 -9.53 31 -13.66 c 0.23 -0.09 0.43 -0.24 0.66 -0.34 c 6.08 -2.74 4.37 -1.12 4.37 2.9 a 118.46 118.46 0 0 0 5 34.94 a 136.89 136.89 0 0 0 11.55 25.35 a 170.25 170.25 0 0 0 16.8 23.3 c 6.22 7.37 12.5 14.67 19.12 21.66 a 103.62 103.62 0 0 0 22.2 17.86 a 129.32 129.32 0 0 0 19.48 9.63 a 71.31 71.31 0 0 0 17.55 4.25 q 5.64 0.67 11.29 1.26 c 14.09 1.45 27.93 0.48 41.46 -3.84 A 101.4 101.4 0 0 0 572 217.18 a 143 143 0 0 0 33.54 -39.24 a 151.79 151.79 0 0 0 11.78 -24.22 c 2.53 -7 3.56 -14.39 4.25 -21.86 c 0.64 -6.91 0.8 -13.8 1 -20.72 c 0 -2.13 0.57 -4.25 0.45 -6.41 s 1.59 -1.84 2.47 -1.42 c 7.84 3.75 16.08 6.4 24.26 9.24 s 16.27 5.85 24.18 9.36 c 7.05 3.13 13.89 6.67 20.62 10.42 c 7.29 4.06 14.4 8.43 21.67 12.52 c 9.29 5.22 18.4 10.65 26.57 17.59 a 222.23 222.23 0 0 0 20 15.12 c 1.92 1.29 2.5 3.46 3.62 5.23 c 4.74 7.54 9.65 15 14 22.78 c 7.24 13 14 26.32 20.4 39.78 c 4.26 8.94 9.11 17.59 13.66 26.4 c 3.88 7.51 7.66 15.07 11.57 22.56 c 6.79 13 13.5 26.06 20.52 38.94 c 6.33 11.62 13 23 19.54 34.57 c 0.8 1.42 3.91 3.45 -0.19 3.73 c -7.89 3.14 -16.31 6.69 -24 10.35 c -7.5 3.59 -14.88 7.56 -22.17 11.58 c -9.14 5 -18.3 10.16 -27.47 15.16 c -9.7 5.29 -19.38 10.61 -29 16.07 c -14.42 8.19 -28.3 17 -42.27 26 c -0.35 0.22 -2.59 2.12 -2.92 2.38 c -3.43 2.72 -2.21 1.1 -5.85 -1.22 a 8.71 8.71 0 0 0 -3.28 -1.6 c 0.48 4.22 -0.28 8.29 -0.48 12.4 c -0.43 8.72 -0.11 17.45 -0.53 26.15 c -0.6 12.44 -0.6 24.88 -1 37.31 c -0.44 13.1 -0.71 26.21 -1 39.31 c -0.12 4.88 0.1 9.8 -0.43 14.65 c -0.78 7.22 0 14.46 -0.48 21.66 c -0.79 12.51 -0.75 25 -1.09 37.56 c -0.14 5.22 0.11 10.47 -0.44 15.65 c -0.79 7.56 0 15.13 -0.5 22.66 c -0.43 6 0 12 -0.52 17.9 c -0.61 7.1 -0.14 14.18 -0.43 21.25 c -0.53 12.6 -0.86 25.2 -1.13 37.81 c -0.11 5.38 0.07 10.79 -0.39 16.15 c -1 11.13 -0.13 22.28 -0.48 33.41 a 43.23 43.23 0 0 0 1.08 11.29 c 0.91 3.89 0.38 7.69 -0.27 11.51 a 12.52 12.52 0 0 0 -0.27 1.45 c -0.83 16.71 -0.62 33.44 -0.39 50.15 a 109.17 109.17 0 0 0 1.74 15 a 43 43 0 0 1 -0.47 12.82 c -0.16 1.05 -1.4 1.55 -2.65 1.75 a 34.36 34.36 0 0 1 -12.06 0 a 9.25 9.25 0 0 0 -2 0 c -11.79 0.29 -23.52 -1.14 -35.31 -1.18 c -5.36 0 -10.79 0.09 -16.15 -0.37 c -9.22 -0.79 -18.46 0.07 -27.65 -0.57 c -7.07 -0.49 -14.12 0 -21.16 -0.4 c -20.46 -1.08 -40.94 0 -61.4 -0.6 c -5.89 -0.17 -11.81 0.12 -17.65 -0.48 a 105.12 105.12 0 0 0 -15.66 -0.33 c -16 0.74 -32 -0.11 -47.9 0.55 c -11.56 0.48 -23.11 0.12 -34.66 0.37 c -11.07 0.23 -22.1 1 -33.12 2 c -3.46 0.29 -6.94 0.19 -10.41 0.4 c -5.53 0.34 -11.11 0.43 -16.64 0.76 c -7.88 0.48 -15.77 1 -23.64 1.67 c -5.9 0.53 -11.81 1.74 -17.79 1.17 a 42.11 42.11 0 0 1 -6 -1 a 2.54 2.54 0 0 1 -2 -2 c -0.42 -4.59 -1 -9.17 -0.16 -13.81 c 0.49 -2.58 0.25 -5.26 0.5 -7.9 c 0.37 -3.93 1.44 -7.8 1.17 -11.79 c -0.37 -5.66 0.5 -11.36 -0.52 -17 a 11.29 11.29 0 0 1 0 -2 c 0 -23.92 -0.38 -47.84 0.14 -71.74 c 0.31 -14.22 -0.22 -28.45 0.47 -42.65 c 0.4 -8.23 -0.11 -16.46 0.44 -24.66 c 0.9 -13.22 -0.16 -26.46 0.53 -39.65 c 0.67 -12.64 0.29 -25.27 0.38 -37.91 c 0.13 -18.85 0.4 -37.71 -0.11 -56.55 c -0.3 -10.92 0.07 -21.84 -0.4 -32.75 c -0.41 -9.55 -0.06 -19.12 -0.56 -28.65 c -0.72 -13.73 -0.11 -27.44 -0.4 -41.16 c -0.21 -10 -0.47 -20 -1.29 -30.35 c -0.91 1.32 -0.77 2 -1.84 1.38 c -6.73 -3.84 -14.48 -8.45 -21.29 -12.13 c -5 -2.71 -10 -5.37 -15.27 -7.7 c -4.62 -2.06 -9.07 -4.52 -13.71 -6.56 c -9.35 -4.1 -18.75 -8.1 -27.93 -12.54 q -8.46 -4.09 -16.79 -8.48 c -7.35 -3.87 -14.92 -7.33 -22.5 -10.72 c -5.21 -2.33 -10.6 -4.28 -15.93 -6.34 c -7 -2.69 -14 -5.28 -21 -8 C 138.52 377.06 134.83 375.72 132 374.47 Z" stroke-linecap="round"/>
</g>

</svg>

</textarea>

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)