какие типы файлов SVG fabricJS поддерживают?

Я использую следующий код для добавления SVG файлов на холст с FabricJS:какие типы файлов SVG fabricJS поддерживают?

fabric.loadSVGFromURL(stampURL, function (objects, options) { 
    var obj = fabric.util.groupSVGElements(objects, options); 
    obj.set({ 
     fill: stampColor, 
     left: stampX, 
     top: stampY, 
     scaleY: stampScale, 
     scaleX: stampScale, 
     originX: 'center', 
     originY: 'center', 
     hasControls: false, 
     hasBorders: true, 
     selectable: false, 
     perPixelTargetFind: true 
    }); 
    Fcanvas.add(obj).renderAll(); 
});

Для некоторых файлов Она работает идеально. Эти хорошие файлы были первоначально XAML-файлами, и я преобразовал их в SVG с помощью Inkscape.

Сегодня я получил новые SVG-файлы из моего графического дизайнера, и я начинаю получать эти ошибки в:

Consol

fabric1_5dev.js:4264 TypeError: (this.getObjects(...)[0].get(...) || "").toLowerCase is not a function 
    at klass.fabric.PathGroup.fabric.util.createClass.isSameColor (..../js/fabric1_5dev.js:17008:68) 
    at klass.fabric.PathGroup.fabric.util.createClass._set (..../js/fabric1_5dev.js:16928:44) 
    at klass._set (..../js/fabric1_5dev.js:3499:52) 
    at klass.fabric.Object.fabric.util.createClass._setObject (..../js/fabric1_5dev.js:12368:14) 
    at klass.fabric.Object.fabric.util.createClass.set (..../js/fabric1_5dev.js:12381:14) 
    at ..../js/FCanvasFunc.js:143:13 
    at ..../js/fabric1_5dev.js:5202:11 
    at null.callback (..../js/fabric1_5dev.js:4832:11) 
    at fabric.ElementsParser.checkIfDone (..../js/fabric1_5dev.js:5373:10) 
    at ..../js/fabric1_5dev.js:5351:11

файлы были сгенерированы с Adobe Illustrator: «Generator: Adobe Illustrator 14.0.0, SVG экспорт Plug-In. SVG Version: 6.00 Build 43363 «

Должен отметить, что эти файлы открываются в браузере или в Inkscape.

Я даже попытался загрузить эти файлы в Inkscape и сохранить их как обычный SVG, но это тоже не помогает.

здесь файл SVG, который не работает:

<?xml version="1.0" encoding="utf-8"?>

<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="-351.3892" y1="-681.873" x2="-351.3892" y2="-655.4012" gradientTransform="matrix(1.4838 0 0 1.4838 558.5508 1038.5566)"> 
    <stop offset="0" style="stop-color:#72C5EE"/> 
    <stop offset="0.2578" style="stop-color:#6EBEE6"/> 
    <stop offset="0.6475" style="stop-color:#61ACD2"/> 
    <stop offset="1" style="stop-color:#5396B9"/> 
</linearGradient> 
<path fill="url(#SVGID_1_)" stroke="#29AAE1" stroke-width="0.9549" stroke-linecap="round" stroke-linejoin="round" d=" 
    M42.422,31.788h-0.889c1.879-1.359,3.111-3.555,3.111-6.051c0-4.135-3.348-7.485-7.48-7.485c-4.135,0-7.485,3.351-7.485,7.485 
    c0,2.496,1.233,4.691,3.112,6.051h-0.893c-2.418,0-4.381,2.157-4.381,4.817v29.855c0,0.373,4.738,2.292,9.417,2.292 
    c4.733,0,9.757-1.21,9.757-1.21c0.07-0.346,0.111-0.709,0.111-1.082V36.605C46.803,33.944,44.843,31.788,42.422,31.788z"/> 

    <linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="-335.3667" y1="-684.248" x2="-335.3667" y2="-654.8643" gradientTransform="matrix(1.4838 0 0 1.4838 558.5508 1038.5566)"> 
    <stop offset="0" style="stop-color:#F05856"/> 
    <stop offset="0.3137" style="stop-color:#F0544E"/> 
    <stop offset="0.7879" style="stop-color:#EF483A"/> 
    <stop offset="1" style="stop-color:#EE422E"/> 
</linearGradient> 
<path fill="url(#SVGID_2_)" stroke="#EE422E" stroke-width="0.9549" stroke-linecap="round" stroke-linejoin="round" d=" 
    M65.733,34.999h-1.101c1.662-1.169,2.753-3.092,2.753-5.276c0-3.564-2.888-6.453-6.452-6.453s-6.455,2.889-6.455,6.453 
    c0,2.185,1.093,4.107,2.754,5.276h-1.098c-2.21,0-3.997,2.007-3.997,4.481V65.42c0,0,4.332,1.449,9.723,1.449 
    c4.183,0,7.87-2.173,7.87-2.173V39.48C69.73,37.006,67.942,34.999,65.733,34.999z"/> 

    <linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="-343.6499" y1="-672.3726" x2="-343.6499" y2="-656.6719" gradientTransform="matrix(1.4838 0 0 1.4838 558.5508 1038.5566)"> 
    <stop offset="0" style="stop-color:#B3D234"/> 
    <stop offset="0.2935" style="stop-color:#ABCB36"/> 
    <stop offset="0.7372" style="stop-color:#97B83A"/> 
    <stop offset="1" style="stop-color:#87AA3E"/> 
</linearGradient> 
<path fill="url(#SVGID_3_)" stroke="#87AA3E" stroke-width="0.9549" stroke-linecap="round" stroke-linejoin="round" d=" 
    M53.5,45.788h-1.957c1.786-1.083,2.991-3.029,2.991-5.271c0-3.411-2.769-6.18-6.183-6.18s-6.182,2.769-6.182,6.182 
    c0,2.24,1.205,4.187,2.99,5.27l-1.371,0.002c-2.236,0-4.044,1.81-4.044,4.042v19.027c0,0,3.899,1.621,9.291,1.621 
    c5.067,0,8.507-1.131,8.507-1.131V49.831C57.543,47.6,55.735,45.788,53.5,45.788z"/> 

    <linearGradient id="SVGID_4_" gradientUnits="userSpaceOnUse" x1="-357.6011" y1="-672.7729" x2="-357.6011" y2="-652.2373" gradientTransform="matrix(1.4838 0 0 1.4838 558.5508 1038.5566)"> 
    <stop offset="0" style="stop-color:#FFCC05"/> 
    <stop offset="0.2578" style="stop-color:#FEC408"/> 
    <stop offset="0.6475" style="stop-color:#FBB012"/> 
    <stop offset="1" style="stop-color:#F7971D"/> 
</linearGradient> 
<path fill="url(#SVGID_4_)" stroke="#FAAF3B" stroke-width="0.9549" stroke-linecap="round" stroke-linejoin="round" d=" 
    M31.272,50.715c1.459-1.042,2.417-2.739,2.417-4.67c0-3.176-2.576-5.749-5.748-5.749s-5.744,2.573-5.744,5.749 
    c0,1.931,0.959,3.628,2.418,4.67c-2.238,0.22-3.992,2.044-3.992,4.287v14.213c0,0,3.713,1.552,7.806,1.552 
    c3.378,0,6.835-1.552,6.835-1.552V55.002C35.264,52.759,33.51,50.935,31.272,50.715z"/>

Любые идеи, что это проблема с этим файлом?

UPDATE: Я подозревал, что цвет заливки градиента и попробовал другой файл, созданный таким же образом, но без градиента цвета заливки и она работает. Таким образом, похоже, что это проблема.

Кто-нибудь знает, не поддерживает ли FabricJS файлы, содержащие линейную градиентную окраску?

ОБНОВЛЕНИЕ: Тот же SVG работает на кухне, поэтому проблема, вероятно, лежит в моем коде загрузки. Любые идеи?

источник

2015-08-06 user2299401

Ok !! Найдено.

Неисправность FabricJS, потому что я попытался установить цвет ощущения для этого SVG. Проблема в функции заложен: isSameColor

здесь фикс, как это предусмотрено для меня Андреа БОГАЦЦИ в GitHub

fabric.PathGroup.prototype.isSameColor = function() { 
var firstPathFill = this.getObjects()[0].get('fill') || ''; 
    if (typeof firstPathFill !== 'string') { 
    return false; 
    } 
    firstPathFill = firstPathFill.toLowerCase(); 
    return this.getObjects().every(function(path) { 
    var pathFill = path.get('fill') || ''; 
    return typeof pathFill === 'string' && (pathFill).toLowerCase() === firstPathFill; 
    }); 
};

источник

2015-08-08 10:17:58 user2299401

какие типы файлов SVG fabricJS поддерживают?

ответ

Смежные вопросы