html5-canvasfabricjsfabricjs2node-canvas

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


I have a problem with render SVG in fabricjs when SVG include text with custom font. enter image description here

How to make SVG in Fabricjs display correct with custom font?

Here is my code:

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>

Here is my resources:
1. Font file: CurlzMT
2. SVG file: group_test.svg

Thank you!


Solution

  • You need to embed the font in svg file. The content of the svg must be like this https://files.fm/f/qhvbe8jj