使用在firefox中不可見的fabric.js將svg圖像添加到畫布中

Question

我在我的angular.js應用程序中使用fabric.js在畫布上添加了背景svg圖像，背景在chrome中完美可見，但在Firefox中卻看不到，我提供了js代碼和svg。

我在OSX 10.11.5上使用firefox 47.0.1

為什么在Firefox中看不到它？

任何幫助將不勝感激。

 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

您無法在畫布上繪制沒有指定寬度和高度的svg時遇到了Firefox錯誤。 您應該修改SVG並為其添加寬度和高度。 同樣，將圖像添加為背景的代碼也可以變得更簡單，除非您有某種理由要這樣做。

這是Firefox BUG，僅供參考： https : //bugzilla.mozilla.org/show_bug.cgi?id=700533

該圖像可能也不會在Internet Explorer 11中顯示。

 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>