HTML用js画无法显示,html5 - 画布上的SVG（使用fabricjs）由于转换而无法显示：翻译规则 - 堆栈内存溢出...

到目前为止，Fabricjs还没有适当地支持transformMatrix。 对于每个svg，您都将解析从element到父节点的transform属性，并将其合并到一个矩阵中，然后存储在object.transformMatrix 。

如果导入将它们分组的对象，则正确处理了此transforMatrix ：

fabric.loadSVGFromURL('mysvg.svg', function(objects, options) {

var myobj = fabric.util.groupSVGElements(objects, options);

canvas.add(myobj );

});

这足以正确显示它。

如果出于某种原因希望它们离开路径组对象，则必须执行以下附加步骤：1)从url加载svg 2)逐个对象解析具有当前对象状态的转换矩阵属性3)将对象添加到画布。

这可以通过以下代码完成：

fabric.Object.prototype._removeTransformMatrix = function(addTranslate) {

var left = this.left;

var top = this.top;

if (this.type !== 'text' && this.type !== 'i-text') {

left += this.width / 2;

top += this.height / 2;

}

var matrix = fabric.util.multiplyTransformMatrices(this.transformMatrix || [1, 0, 0, 1, 0, 0], [1, 0, 0, 1, left, top]);

var options = fabric.util.qrDecompose(matrix);

this.scaleX = options.scaleX;

this.scaleY = options.scaleY;

this.angle = options.angle;

this.skewX = options.skewX;

this.skewY = 0;

this.flipX = false;

this.flipY = false;

var point = new fabric.Point(options.translateX, options.translateY);

this.setPositionByOrigin(point , 'center', 'center');

this.transformMatrix = null;

};

然后致电：

fabric.loadSVGFromURL('mysvg.svg', function(objects, options) {

for (var i = 0; i < objects.length; i++) {

objects[i]._removeTransformMatrix();

canvas.add(objects[i]);

}

});

应该为您解决问题。

这将使您能够解析任何复杂的转换，而不仅仅是转换。 该代码假定来自svg的对象的x和y可能与0不同，但不会在transform属性之外携带任何角度或偏斜。 同样在SVG中，对象位于左上角。 此代码不会删除fabricJS环境中任何自定义对象的任何自定义transformMatrix。

当然，请使用最新的fabricjs。 不适用于1.5.0

svg之一具有以下所示的translate属性：

translate(-x-y);

translate:

"translate" wsp* "(" wsp* number ( comma-wsp number )? wsp* ")"

comma-wsp:

(wsp+ comma? wsp*) | (comma wsp*)

它说

"translate"+ 0 or more spaces + "(" + number + optionally a comma-wsp + another number + ")"

逗号-wsp定义为：

1 or more spaces, 0 or 1 comma, any number of spaces. OR a comma + any number of spaces.

因此，至少应该有一个空格或逗号。

由@onassar更新于2016年1月15日

尽管上述逻辑有所帮助，但我意识到一种更简单的方法是格式化返回以下内容的SVG xml：

xml.replace(/translate\((\-?[0-9\.]+)(\-?[0-9\.]+)\)/gi, 'translate($1 $2)')

这确实可以解决问题，但是如果您正在寻找其他解决方案，上述步骤也将有所帮助。