当 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

谢谢！

Answer 1

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

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

FabricJS not render SVG correct when SVG include text with custom font?

html5-canvas

fabricjs

fabricjs2

node-canvas