fabric.js load svg elements

by Vijay Gujar

HTML

<script src="https://mediatours.ca/wp-content/plugins/propertys/js/fabric2.js"></script>
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript" src="fabric.min.js"></script>

<style>
    body{ background-color: ivory; }
    canvas{border: 1px solid red; }
</style>

<script>
    $(function(){

        var canvas = new fabric.Canvas('canvas');
        var group = [];
			var svgdata= '<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">  <path id="MyPath" fill="none" stroke="red"        d="M10,90 Q90,90 90,45 Q90,10 50,10 Q10,10 10,40 Q10,70 45,70 Q70,70 75,50" />  <text>    <textPath href="#MyPath">      Quick brown fox jumps over the lazy dog.    </textPath>  </text></svg>';
        fabric.loadSVGFromString(svgdata,function(objects, options){
  var svgData = fabric.util.groupSVGElements(objects, options);
  svgData.top = 30;
  svgData.left = 50;
  canvas.add(svgData);
});

    }); // end $(function(){});
</script>

</head>

<body>
    <canvas id="canvas" width="300" height="300"></canvas> 
</body>
</html>

CSS

.canvas-container {
    border: 1px solid #999;
}
.svg {
    display: none;
}