Added svg image into canvas using fabric.js not visible in firefox

Question

I am adding background svg image to my canvas using fabric.js in my angular.js application, the background is visible perfectly in chrome but not in firefox, I have provided js code and svg.

I am using firefox 47.0.1 on OSX 10.11.5

Why it is not visible in firefox?

Any help will be appreciated.

 var image="mysvg.svg"; $window.fabric.Image.fromURL(image, function(oImg) { oImg.width = width; oImg.height = height; oImg.lockMovementX = true; oImg.lockMovementY = true; oImg.lockRotation = true; oImg.lockScalingX = true; oImg.lockScalingY = true; oImg.selectable = false; oImg.selectable = false; oImg.id = 'bg_image'; canvas.centerObject(oImg) .add(oImg) .sendToBack(oImg) .renderAll(); }); 

 <?xml version="1.0" encoding="utf-8"?> <svg version="1.1" id="mysvg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 921.3 921.3" style="enable-background:new 0 0 921.3 921.3;" xml:space="preserve"> <style type="text/css"> .st0{fill:#DEDEDE;} .st1{fill:none;stroke:#000000;stroke-width:0.75;stroke-miterlimit:10;} </style> <g id="Jacket_Spine"> <g id="jacket"> <g> <polygon class="st0" points="719.3,420.1 200.7,420.1 17,471.7 903,471.7 "/> </g> </g> <rect id="Spine_1_" x="17" y="471.8" class="st1" width="887.2" height="11.3"/> </g> </svg> 

Answer 1

You are hitting a firefox bug wher a svg without specified width and height cannot be drawn on canvas. You should modify your SVG and add a width and height to it. Also the code to add the image as background could be made simpler, unless you have some reason to have it in that way.

Here is the firefox BUG just as a reference: https://bugzilla.mozilla.org/show_bug.cgi?id=700533

Probably the image will not show on internet explorer 11 also.

 var image="mysvg.svg"; fabric.Image.fromURL(image, function(oImg) { canvas.bakgroundImage = oImg; canvas.renderAll(); }); 

 <?xml version="1.0" encoding="utf-8"?> <svg version="1.1" id="mysvg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="922" height="922" viewBox="0 0 921.3 921.3" style="enable-background:new 0 0 921.3 921.3;" xml:space="preserve"> <style type="text/css"> .st0{fill:#DEDEDE;} .st1{fill:none;stroke:#000000;stroke-width:0.75;stroke-miterlimit:10;} </style> <g id="Jacket_Spine"> <g id="jacket"> <g> <polygon class="st0" points="719.3,420.1 200.7,420.1 17,471.7 903,471.7 "/> </g> </g> <rect id="Spine_1_" x="17" y="471.8" class="st1" width="887.2" height="11.3"/> </g> </svg>