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 bug无法在画布上绘制。您应该修改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图像添加到画布中

1 个答案: