fabricjs-将SVG内联样式应用于对象

Question

我正在使用loadSVGfromURL用this SVG填充画布

正如您在链接中看到的那样，我的衬衫上有一些希瑟效果，还有一些阴影。另外，我的SVG样式将mix-blend-mode: multiply;应用于我的路径。

不幸的是，一旦在画布上渲染，似乎CSS的路径就没有考虑在内：

如何确保应用此样式？

Answer 1

这里是一个例子。基本上，您需要将mix-blend-mode映射到globalCompositeOperation

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



canvas = new fabric.Canvas('canvas');
fabric.loadSVGFromURL(site_url, function(objects) {

  var group = new fabric.Group(objects, {
    left: 165,
    top: 100,
    
  });
  canvas.add(group);
  group._objects[3].globalCompositeOperation='multiply';
  group._objects[2].globalCompositeOperation='multiply';
  group._objects[4].globalCompositeOperation='multiply';
  group._objects[5].globalCompositeOperation='multiply';
  group._objects[6].globalCompositeOperation='multiply';
 /*for(var i=0;i<objects.length;i++){
 canvas.add(objects[i]);
 }
 canvas.getObjects()[5].globalCompositeOperation='multiply';*/
 // canvas.add(objects);
  canvas.renderAll();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.4.6/fabric.js"></script>
<canvas id='canvas' width="900" height="900"></canvas>