fabricjs - применять SVG-стиль к объектам - PullRequest
Новая
       10

fabricjs - применять SVG-стиль к объектам

0 голосов
/ 04 января 2019

Я использую loadSVGfromURL, чтобы заполнить холст этим SVG

Как видно по ссылке, у меня на рубашке появился эффект Хезер, а также тени. Кроме того, мой стиль SVG применяет mix-blend-mode: multiply; к моим путям.

К сожалению, когда-то отрисованный на моем холсте, кажется, что пути CSS не учитываются: same image, but no heather nor shadows

Как я могу убедиться, что этот стиль применяется?

1 Ответ

0 голосов
/ 04 января 2019

Вот пример. По сути, вам необходимо отобразить режим смешивания-смешивания на 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>
...