面料js從url加載svg缺少屬性

我想使用loadSVGfromURL和一切都很好，但我有一些文字問題。面料js從url加載svg缺少屬性

如果我試圖加載文本像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(); 
    }); 
})

來源

2016-04-08 InnokentyDM

莫非你提供一些現場示例？ JSFiddle？ –

http://jsfiddle.net/1mcxn7um/ – InnokentyDM

這裏是我曾經測試的sfg fie。如果您在瀏覽器中打開它，一個字符串將與其他字體顏色不同，但如果使用小提琴加載每個字符串將會使用相同顏色https://drive.google.com/file/d/0B-XQpJWb-678STYtVFhtTFY3eWs/view – InnokentyDM

問題是缺少fabricjs TSPAN支持。

SVG的看起來是這樣的：

<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>

信息類= 「CLS-2」和class = 「CLS-3」沒有得到解析，因爲TSPAN被丟棄。

您可以修改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>

得到它的解析。

來源

2016-04-12 19:57:09 AndreaBogazzi

我如何自動修改每個svg？我可以寫簡單的scipt來取代它嗎？ – InnokentyDM

我已經添加了這個 var svg = doc;
爲（VAR I = 0;我< svg.childNodes.length;我++）{

 if (svg.childNodes[i].tagName == "text") { 
      for (var j = 0; j < svg.childNodes[i].childNodes.length; j++) { 
       if (svg.childNodes[i].childNodes[j].tagName == "tspan") { 
        for (var k = 0; k < svg.childNodes[i].childNodes[j].classList.length; k++) 
        { 
         var tmpClassName = svg.childNodes[i].childNodes[j].classList[k]; 
         svg.childNodes[i].classList.add(tmpClassName); 
        } 



       } 
      } 
     } 
    }

在

fabric.parseSVGDocument

功能加我TSPAN樣式文本樣式

來源

2016-04-14 13:59:42 InnokentyDM

面料js從url加載svg缺少屬性

回答

相關問題