canvas 上的 SVG（使用 fabricjs）由于 transform:translate 规则而无法看到

Question

SVG 有问题我正在使用 fabric.js 加载到 canvas 在屏幕截图中，您会看到边界框和图标不重叠：

问题似乎来自 SVG 中的以下属性值：transform="translate(-255.7-577)"。

我（使用 fabric.js）在弄清楚如何调整 SVG 以使这种翻译不会发生时遇到了问题。

任何指导，无论是 fabric.js 特定的还是原生的 canvas 方法，我们都将不胜感激。似乎无法弄清楚如何调整 SVG 对象中的路径。

Answer 1

Fabricjs 目前没有对 transformMatrix 的适当支持。对于每个解析从元素到父节点的 transform 属性的 svg，解析并合并到一个矩阵中，然后将其存储在 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) 添加对象到 canvas.

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

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 的对象可能具有不同于 0 的 x 和 y，但不会在 transform 属性之外携带任何角度或倾斜。同样在 SVG 对象中 top-left 定位。此代码不会删除 fabricJS 环境中任何自定义对象的任何自定义 transformMatrix。

当然要用最新的fabricjs。不适用于 1.5.0

此处 fiddle 执行此代码。 http://jsfiddle.net/asturur/7gvJG/66/

其中一个 svg 的 translate 属性表示如下：

translate(-x-y);

正在检查 w3cspesc： http://www.w3.org/TR/SVG/coords.html#TransformAttribute 看起来 space 是强制性的：

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 + ")"

和comma-wsp定义为：

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

所以至少应该有一个 space 或一个逗号。

@onassar 于 2016 年 1 月 15 日更新
虽然上述逻辑有所帮助，但我意识到一种更简单的方法是格式化返回的 SVG xml：

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

这确实有效，但如果您正在寻找其他解决方案，上述步骤也会有所帮助。

canvas 上的 SVG（使用 fabricjs）由于 transform:translate 规则而无法看到

SVG on canvas (using fabricjs) can't be seen because of transform: translate rule

html

svg

canvas

fabricjs