I have used fabric.loadSVGFromURL
function for loading SVG image to canvas.
Most of the images are loading correctly on the canvas but there are some SVG images which are not loading properly on the canvas (half of the SVG is loading as black colored SVG).
Following SVG is not loaded properly on canvas:
http://dev9.edisbest.com/Bat_B_020.svg
Following is the code which I have used:
var src ="http://dev9.edisbest.com/Bat_B_020.svg";
fabric.loadSVGFromURL(src, function (objects, options) {
var shape = fabric.util.groupSVGElements(objects, options);
shape.set({
left: canvas.width/2,
top: canvas.height/2,
scaleY: canvas.height / (shape.height*3),
scaleX: canvas.width /(shape.width*3)
});
shape.setCoords();
canvas.add(shape);
canvas.setActiveObject(shape);
canvas.renderAll();
});
this screenshot taken when above SVG loaded on canvas; there I got unwanted black color which actually not in the SVG.
this issue is solved by Kangax.
please check below link:
thanks you so much Kangax....!