fabricjs：SVG的多个路径具有完全相同的梯度的问题

Question

对于我的Web应用程序，我正在Illustrator中创建SVG元素，然后在用户可以将其添加到织物画布的元素库中使用它们。

某些元素很简单，但有些元素却具有多个复合路径，等等。

我遇到了一个不寻常的问题：如果我创建一个具有渐变填充的路径，然后复制该路径，保存SVG并将其添加到画布上，则只有第一个路径具有渐变，平面颜色。

这是我的意思的屏幕截图...

在尝试并尝试了不同的方法之后，我终于发现发生这种情况是因为路径具有完全相同的渐变属性。

因此，如果两个或更多路径的渐变滑块（颜色停止，不透明度，位置等）在Illustrator中具有完全相同的属性，则会出现此问题。

因此，解决方法是将位置（例如）更改为复制路径上的99.9％而不是100％，然后问题就消失了。但是，这将很快成为解决此问题的乏味而烦人的方法。基本上，每个具有渐变的路径都需要设置唯一的渐变，并且不能与其他路径的渐变属性相同。

这里有更多屏幕截图可以更好地说明...

进行此更改后...

• 第一条路径和第二条路径的渐变位置不同。

• 第一，第三，第四和第五条路径具有完全相同的梯度。

这就是我现在将其添加到画布中时的样子...

这是我用来将SVG添加到画布的代码...

  fabric.loadSVGFromURL(image, function(objects, options) {

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

      oImg.perPixelTargetFind = true;
      oImg.targetFindTolerance = 4;
      canvas.add(oImg);
      canvas.renderAll();

  });

谁能告诉我为什么会这样，是否有办法通过代码而不是Illustrator来解决？我要创建数百个元素，这些元素将具有许多具有相同渐变的路径。我知道必须担心路径不具有完全相同的坡度将是非常痛苦的。

http://jsfiddle.net/oc70xjsq/

Link to the SVG