what types of SVG files fabricJS support?
I use the following code to add SVG files to canvas with 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();
});
For some files It works perfect. These good files were originally XAML files and I converted them to SVG with Inkscape.
Today I got new SVG files from my graphic designer and I start getting these errors in the 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
the files were generated with Adobe Illustrator: "Generator: Adobe Illustrator 14.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 43363"
I must mention that these files are opened perfectly in the browser or in Inkscape.
I even tried to load these files into Inkscape and save them as plain SVG but this doesn't help either.
here is an SVG file that doesn't work:
<?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"/>
Any ideas what is the problem with this file?
UPDATE: I suspected the gradient fill color and tried another file created the same way but without gradient fill color and it works. So it looks like this is the problem.
Does anyone knows if FabricJS does not support files which contain linear gradient coloring?
UPDATE: The same SVG works in kitchensink so the problem probably lay in my loading code. Any Ideas?
Ok!! Found it .
FabricJS failed because I tried to set the feel color for this SVG. The problem layed in function: isSameColor
here is a fix as provided to me by Andrea Bogazzi in 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;
});
};
上一篇: 在SVG中的坐标处选择元素