JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://rawgithub.com/kangax/fabric.js/master/dist/all.js"></script>
<h3>Raw svg element:<h3>
<div id="test-svg"></div>
<hr/>
<h3>Fabricjs rendered svg in canvas:</h3>    
<canvas id="test-canvas"></canvas>
    
<p>It looks like Fabricjs doesn't honor transformed elements inside other transformed elements; blue rect is not translated correctly.</p>

JavaScript

var svg = '\
<svg baseProfile="tiny" xmlns="http://www.w3.org/2000/svg" width="100" height="50">\
    <rect width="50" height="50" fill="#F00"/>\
    <g transform="translate(50)">\
        <rect width="50" height="50" fill="#0F0"/>\
        <g transform="translate(10 10)">\
            <rect width="30" height="30" fill="#00F"/>\
        </g>\
    </g>\
</svg>\
';

document.getElementById("test-svg").innerHTML = svg;

fabric.loadSVGFromString(svg, function(objects, options) {
    var canvas = new fabric.StaticCanvas("test-canvas"),
        group = fabric.util.groupSVGElements(objects, options);
      
	group.left = 50;
	group.top = 25;
    canvas.add(group);
    canvas.renderAll();
});