时间戳

首页 > 解决方案 > fabricjs - 将 SVG 内联样式应用于对象

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

问题描述

我正在用这个 SVGloadSVGfromURL填充画布

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

不幸的是，一旦在我的画布中渲染，似乎没有考虑到路径 CSS： 相同的图像，但没有石南花或阴影

我怎样才能确保应用这种风格？

标签： fabricjs

解决方案

这是一个例子。基本上你需要将 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>

推荐阅读