SVG is not rendering properly on canvas with Fabric.js

问题

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.

回答1:

this issue is solved by Kangax.

please check below link:

https://github.com/kangax/fabric.js/issues/1021

thanks you so much Kangax....!

来源：https://stackoverflow.com/questions/20287939/svg-is-not-rendering-properly-on-canvas-with-fabric-js