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