使用在 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>