CODEWITHSUNDEEP
html5-canvasfabricjsfabricjs2node-canvas
Tho Bui Ngoc
Tho Bui Ngoc

Reputation: 835

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!

Upvotes: 2

Views: 1762

Answers (1)

Marius Turcu
Marius Turcu

Reputation: 1511

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

Upvotes: 1

Related Questions