svg - 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/

链接到 SVG

标签： svgfabricjs