Question

我正在开发一个D3库，它将D3与名为AngularD3的AngularJS指令集成在一起。最近的一个指令允许生成可以绑定到数据并动态更新的渐变。这似乎适用于除Firefox之外的所有浏览器。但是，如果我将输出SVG复制/粘贴到像JSFiddle这样的东西上，那么它就可以正常工作，所以它很好。

这可能是Firefox处理SVG动态更新的限制/错误吗？

以下是一个演示页面，您可以在Chrome和Safari中看到此功能，但不能在Firefox中使用

https://wealthbar.github.io/angular-d3/

此代码可通过the Github repository获得。

D3能够使用大致相同的代码创建与Firefox一起使用的渐变。您可以在Mike's example here中看到此信息。到目前为止，我能找到的唯一区别是对linearGradient的动态更新。

以下是使用＆＃34; copy outer html＆＃34;直接从Firefox复制的SVG的<defs>部分。在DOM资源管理器中供参考（格式化为可读性）：

<defs>
  <linearGradient y2="100%" y1="0%" x2="100%" x1="0%" id="gradient">
    <stop offset="0%" stop-color="#098aae" stop-opacity="0.6"></stop>
    <stop offset="100%" stop-color="#684684" stop-opacity="0.9"></stop>
  </linearGradient>
</defs>

最近在IE 10和11中对此进行了测试，但这些都不起作用。

Answer 1

这里有几个问题：

您似乎在文档中具有具有相同ID的多个元素;您的<d3-gradient>元素的ID也是gradient。我很惊讶尽管如此，Chrome仍然可以使用。
我认为这里的主要问题是您的外部样式表包含url(#gradient)。 Firefox将其解释为相对于样式表 ，而不是相对于文档。我不确定为什么Chrome仍然可以在这种情况下运行，但也许它会回归到相对于文档扩展它。

您可以阅读更多关于Firefox's handling of partial URLs的内容。我相信它正确地解释了规范，而WebKit则不是。

至于修复，我尝试url(../#gradient)，但这适用于Firefox，而不是Chrome / WebKit。您可以使用内联style="url(#gradient)"代替。

D3生成的linearGradient在Firefox / IE中不起作用

1 个答案: