添加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中不可见

回答

相关问题