当SVG包含具有自定义字体的文本时,FabricJS无法正确显示SVG吗?

时间:2019-06-18 06:51:39

标签: html5-canvas fabricjs fabricjs2 node-canvas

当SVG包含具有自定义字体的文本时,fabricjs中的渲染SVG出现问题。 enter image description here

如何使用自定义字体使Fabricjs中的SVG正确显示?

这是我的代码:

var canvasObject = document.getElementById("editorCanvas");

		// set canvas equal size with div
		$(canvasObject).width($("#canvasContainer").width());
		$(canvasObject).height($("#canvasContainer").height());

var canvas = new fabric.Canvas('editorCanvas', {
  backgroundColor: null,
  selectionLineWidth: 2,
  width: $("#canvasContainer").width(),
  height: $("#canvasContainer").height()
});

var imageObj = new fabric.Image();
		canvas.add(imageObj);	
imageObj.setSrc('https://futushigame.firebaseapp.com/group_test.svg', function(imageObject) {
  imageObject.set({top: 0, left: 0});
  imageObject.set('dirty', true);
  canvas.renderAll();
  setObjectCoords();
});


function setObjectCoords() {
  canvas.forEachObject(function(object) {
  object.setCoords();
  });
}
#canvasContainer {
  width: 100%;
  height: 100vh;
}
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.4.3/fabric.js"></script>
  
  <style>
		 @font-face {
                font-family: 'CurlzMT';
                src: url("https://futushigame.firebaseapp.com/CurlzMT.ttf") format("ttf");
                font-weight: 'normal';
                font-style: 'normal';
            }
	</style>
  
  <div id="canvasContainer">
    <canvas id="editorCanvas"></canvas>
  </div>

这是我的资源:
1.字体文件:CurlzMT
2. SVG文件:group_test.svg

谢谢!

1 个答案:

答案 0 :(得分:2)

您需要将字体嵌入到svg文件中。 svg的内容必须是这样的 https://files.fm/f/qhvbe8jj