添加svg圖像到canvas中使用fabric.js在firefox中不可見

-1

我將背景svg圖像添加到我的canvas中，在我的angular.js應用程序中使用fabric.js，背景在Chrome中完全可見但在Firefox中不可見提供了js代碼和svg。添加svg圖像到canvas中使用fabric.js在firefox中不可見

我使用的Firefox 47.0.1在OSX 10.11.5

爲什麼它是不可見在Firefox？

任何幫助將不勝感激。

var image="mysvg.svg"; 
 
$window.fabric.Image.fromURL(image, function(oImg) { 
 
\t \t \t \t \t oImg.width = width; 
 
\t \t \t \t \t oImg.height = height; 
 
\t \t \t \t \t oImg.lockMovementX = true; 
 
\t \t \t \t \t oImg.lockMovementY = true; 
 
\t \t \t \t \t oImg.lockRotation = true; 
 
\t \t \t \t \t oImg.lockScalingX = true; 
 
\t \t \t \t \t oImg.lockScalingY = true; 
 
\t \t \t \t \t oImg.selectable = false; 
 
\t \t \t \t \t oImg.selectable = false; 
 

 
\t \t \t \t \t oImg.id = 'bg_image'; 
 

 
\t \t \t \t \t canvas.centerObject(oImg) 
 
\t \t \t \t \t \t .add(oImg) 
 
\t \t \t \t \t \t .sendToBack(oImg) 
 
\t \t \t \t \t \t .renderAll(); 
 
\t \t \t });

<?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" 
 
\t 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"> 
 
\t .st0{fill:#DEDEDE;} 
 
\t .st1{fill:none;stroke:#000000;stroke-width:0.75;stroke-miterlimit:10;} 
 
</style> 
 
<g id="Jacket_Spine"> 
 
\t <g id="jacket"> 
 
\t \t <g> 
 
\t \t \t <polygon class="st0" points="719.3,420.1 200.7,420.1 17,471.7 903,471.7 \t \t \t "/> 
 
\t \t </g> 
 
\t </g> 
 
\t <rect id="Spine_1_" x="17" y="471.8" class="st1" width="887.2" height="11.3"/> 
 
</g> 
 
</svg>

來源

2017-01-04 Nikunj Sardhara

你在打破Firefox的錯誤wher沒有指定寬度和高度的SVG不能在畫布上繪製。您應該修改SVG併爲其添加寬度和高度。此外，添加圖像作爲背景的代碼可以變得更簡單，除非您有某種理由以這種方式擁有它。

這裏是Firefox的錯誤只是作爲一個參考： https://bugzilla.mozilla.org/show_bug.cgi?id=700533

也許圖像不會出現在Internet Explorer 11也。

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

<?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" 
 
\t 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"> 
 
\t .st0{fill:#DEDEDE;} 
 
\t .st1{fill:none;stroke:#000000;stroke-width:0.75;stroke-miterlimit:10;} 
 
</style> 
 
<g id="Jacket_Spine"> 
 
\t <g id="jacket"> 
 
\t \t <g> 
 
\t \t \t <polygon class="st0" points="719.3,420.1 200.7,420.1 17,471.7 903,471.7 \t \t \t "/> 
 
\t \t </g> 
 
\t </g> 
 
\t <rect id="Spine_1_" x="17" y="471.8" class="st1" width="887.2" height="11.3"/> 
 
</g> 
 
</svg>

來源

2017-01-04 18:29:47 AndreaBogazzi

我得到了它，現在它是可見的，謝謝。 –

添加svg圖像到canvas中使用fabric.js在firefox中不可見

回答

相關問題