Fabric.js - 가져온 svg의 색상/채우기/획 변경

loadSVGFromURL을 사용하여 캔버스에 배치 된 패브릭에서 svg의 색상을 변경하는 방법이 있습니까? svg는 화살표 일 뿐이며 채우기 또는 획을 설정할 수없는 경우 필터로이 작업을 수행 할 수 있습니까?Fabric.js - 가져온 svg의 색상/채우기/획 변경

$("input:radio[id='arrow']").click(function() { 
fabric.loadSVGFromURL('../scripts/svg/arrow.svg', function(objects) { 
      var group = new fabric.PathGroup(objects, { 
      left: 165, 
      top: 100, 
      width: 295, 
      height: 40, 
      fill: colourSet 
     }); 
     canvas.add(group); 
     canvas.renderAll(); 
      }); 
      });

출처

2013-03-28 IlludiumPu36

http://fabricjs.com/hovering/ 및 HTTP ://fabricjs.com/customization/ 당신을 거기에 데려다 줄 것입니다 – dsdsdsdsd

var colorSet = '#00FFFF'; 

$("input:radio[id='arrow']").click(function() { 
    fabric.loadSVGFromURL('../scripts/svg/arrow.svg', function(objects, options) { 
    var shape = fabric.util.groupSVGElements(objects, options); 
    shape.set({ 
     left: 165, 
     top: 100, 
     width: 295, 
     height: 40 
    }); 
    if (shape.isSameColor && shape.isSameColor() || !shape.paths) { 
     shape.setFill(colorSet); 
    } 
    else if (shape.paths) { 
     for (var i = 0; i < shape.paths.length; i++) { 
     shape.paths[i].setFill(colorSet); 
     } 
    } 
    canvas.add(shape); 
    canvas.renderAll(); 
    }); 
});

모든 경로가 같은 색이있는 경우 fabric.PathGroup의 기능 setFill에만 작동 개체 : https://github.com/kangax/fabric.js/blob/master/src/path_group.class.js#L99

출처

2013-04-29 10:06:33 Kienz

안녕하세요 Kienz, 이것에 당신의 도움을 주셔서 감사합니다. 그러나 화살표가 그 코드로 캔버스에 전혀 추가되지 않았습니다 ... – IlludiumPu36

안녕하세요 Peter, jsfiddle 예제를 만들었습니다 (loadSVGFromString loadSVGFromURL 대신) : http : //jsfiddle.n et/Kienz/nFqpB/ SVG를 게시 할 수 있습니까?! – Kienz

"너는 색을 말하고, 나는 색을 말하며, 모든 것을 꺼야한다 ..."(조지와 아이라 거시 윈에게 사과). 문제는 colourSet (영문 철자)를 사용하고 'colorSet'(Yank spelling ...)이라는 함수가 사용되었다는 것입니다. 모두 일하고있어. – IlludiumPu36

OBJECT.setFill ('FILL_COLOR'); 예를 들어

rect.setFill('red');

출처

2013-04-25 10:33:07 rafi

Fabric.js - 가져온 svg의 색상/채우기/획 변경

답변

관련 문제