FabricJS（FileReaderのを使用して）キャンバスにSVG

Question

が、私は次の属性を持つボタンとキャンバス持っている - ]ボタンをクリックすると

<button onclick="openSVG()">Open</button> 
<canvas></canvas> 

を、openSVG()機能は

になっています
• ローカルハードドライブ（以前はFabricJSを使用して作成）からSVGファイルを選択して開きます。
• SVGファイルの内容をFileReaderで読み取って変数
に保存します今すぐ開く]ボタンをクリックする fabric.loadSVGFromString()方法

を使ってキャンバスを埋めるために、その変数を使用して

は、ファイル選択ウィンドウを開きますが、キャンバスにオブジェクトを描画doesntの。ここにopenSVG（）関数があります -

function openSVG() { 

// importing file 
var input = $(document.createElement('input')); 
input.attr("id", "mySVGFile") 
input.attr("type", "file"); 
input.trigger('click'); 

//storing file contents in var using FileReader 
var myInputFile = document.getElementById('mySVGFile'); 
var myFile = myInputFile.files[0]; 

var fr = new FileReader(); 
fr.onload = function(){ 

    var canvasD = this.result; 

    //loading data from var to canvas 
    fabric.loadSVGFromString(canvasD, function(objects, options) { 
     var obj = fabric.util.groupSVGElements(objects, options); 
     canvas.add(obj).renderAll(); 
    }); 
}; 

fr.readAsText(myFile); } 

私はFileReaderを使い慣れています。コンソールにエラーはないので、私がどこに間違っているのかを知ることさえできません。 私のアプローチは機能しませんか？私が望むものを達成するためのよりよい方法がありますか？

Answer 1

はここ

var canvas = new fabric.Canvas('c'); 
 

 
function openSVG(e) { 
 
    var url = URL.createObjectURL(e.target.files[0]); 
 
    fabric.loadSVGFromURL(url, function(objects, options) { 
 
     objects.forEach(function(svg) { 
 
     svg.set({ 
 
      top: 90, 
 
      left: 90, 
 
      originX: 'center', 
 
      originY: 'center' 
 
     }); 
 
     svg.scaleToWidth(50); 
 
     svg.scaleToHeight(50); 
 
     canvas.add(svg).renderAll(); 
 
     }); 
 
    }); 
 
}

canvas{margin-top:5px;border:1px solid #ccc}

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.11/fabric.min.js"></script> 
 
<input type="file" onchange="openSVG(event)"> 
 
<canvas id="c" width="180" height="180"></canvas>