使用在 firefox 中不可见的 fabric.js 添加 svg 图像到 canvas

Question

我在我的 angular.js 应用程序中使用 fabric.js 将背景 svg 图像添加到我的 canvas，背景在 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

您遇到了一个 firefox 错误，无法在 canvas 上绘制没有指定宽度和高度的 svg。您应该修改您的 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>

使用在 firefox 中不可见的 fabric.js 添加 svg 图像到 canvas

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

html

javascript

html5-canvas

fabricjs

angularjs