从URL添加SVG渲染黑色图像

Question

I have a this SVG , which i am trying to load in canvas but it just render the black image, so how to solve it?

version: 2.0.0-beta.7

I have tried both method loadSVGFromString as well as loadSVGFromURL but no success:

//Using loadSVGFromString
var a = 'svg string';
fabric.loadSVGFromString(a,function(objects, options) {
  var obj = fabric.util.groupSVGElements(objects, options);
    canvas.add(obj).renderAll();
});

//using loadSVGFromURL
fabric.loadSVGFromURL('URL Here', function(objects,options) {
    var group = new fabric.Group(objects, {
        left: 50,
        top: 50,
    });
    canvas.add(group);
    canvas.renderAll();
});

checkout this codepen

Answer 1

"All black" svgs often is a result of some invalid or unsupported svg markup. In your case I think you should remove the fill-opacity="null" references from your svg.