ファブリックjsはURLに不足しているプロパティからsvgをロードします

Question

loadSVGfromURLを使用しようとしていますが、問題はありません。

テキストをロードしようとすると、font-family,fillなどのいくつかのプロパティがロードされません。テキストはロードされますが、デフォルトのプロパティー：黒色colorおよびTimes New Roman fontがあります。

fabric.loadSVGFromURL(img.src, function(objects, options) { 
    var tmpobj = fabric.util.groupSVGElements(objects, options); 
    canvas.setDimensions({ 
     width : tmpobj.width, 
     height : tmpobj.height 
    }); 
    //canvas.clear(); 
    canvas.forEachObject(function(obj) { 
     //var obj = new fabric.Object({ padding: 0 }); 
     var obj = objects[i]; 
     if (obj.get('type') == 'text') { 
      var text = new fabric.IText('Tap and Type', { 
       fontFamily : obj.get('fontFamily'), 
       left : obj.get('left'), 
       top : obj.get('top'), 
       text : obj.get('text'), 
       oCoords : obj.get('oCoords'), 
       fontSize : obj.get('fontSize'), 
       height : obj.get('height'), 
       width : obj.get('width'), 
       fill : obj.get('fill') 
      }); 
      obj = text; 
     } 
     obj.padding = 0; 
     obj.setCoords(); 
     canvas.add(obj); 
     canvas.renderAll(); 
    }); 
}) 

Answer 1

問題がfabricjsでTSPANサポートが欠落しています。

は、ここに私のコードです。

<text x="32" y="40" class="cls-1"><tspan class="cls-2">riev</tspan></text> 
    <text x="158" y="211" class="cls-1"><tspan class="cls-3">0999989878</tspan></text> 
    <text x="96" y="120" class="cls-1"><tspan class="cls-2">Platon</tspan></text> 

tspanのが破棄されるので、情報クラス= "CLS-2" とクラス= "CLS-3" は解析されません。

SVGはこのようになります。

あなたはこのようにSVGを変更することができます。

<text x="32" y="40" class="cls-1 cls-2"><tspan >riev</tspan></text> 
    <text x="158" y="211" class="cls-1 cls-3"><tspan >0999989878</tspan></text> 
    <text x="96" y="120" class="cls-1 cls-2"><tspan >Platon</tspan></text> 

はそれが解析され得るために。

Answer 2

これを追加しました var svg = doc;以下のための
（; I < svg.childNodes.length; VAR私は= 0私は++）{スタイルをテキストに私のtspanのスタイルを追加し