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

Question

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

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

这是一个演示页面,您可以在其中看到这在Chrome和Safari中有效,但在Firefox中无法使用:

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

此代码可通过Github存储库获得.

D3能够使用大致相同的代码创建与Firefox一起使用的渐变.你可以在Mike的例子中看到这一点.到目前为止,我能找到的唯一区别是对linearGradient的动态更新.

以下是<defs>使用DOM浏览器中的"copy outer html"直接从Firefox复制的SVG部分,供参考(格式化为可读性):

<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

这里有几个问题:

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

您可以阅读有关Firefox处理部分URL的更多信息.我相信它正确地解释了规范,而WebKit却没有.

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