html5-canvas - 当 SVG 包含具有自定义字体的文本时，FabricJS 无法正确渲染 SVG？

Question

当 SVG 包含具有自定义字体的文本时，我在 fabricjs 中渲染 SVG 时遇到问题。

如何使用自定义字体使 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

谢谢！

标签： html5-canvasfabricjsfabricjs2node-canvas

Answer 1

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