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

Question

我正在开发一个将 D3 与 AngularJS 指令集成的 D3 库，名为 AngularD3 .最近的指令之一允许生成可以绑定(bind)到数据并动态更新的梯度。这似乎适用于除 Firefox 之外的所有浏览器。但是，如果我将输出 SVG 复制/粘贴到 JSFiddle 之类的东西中，它就可以工作，所以静态没问题。

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

这是一个演示页面，您可以在其中看到此功能在 Chrome 和 Safari 中有效，但在 Firefox 中无效:

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

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

D3 能够使用大致相同的代码创建适用于 Firefox 的渐变。你可以在 Mike's example here 中看到这个.到目前为止，我能找到的唯一区别是对 linearGradient 的动态更新。

这是 <defs>使用 DOM 资源管理器中的“复制外部 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也。尽管如此，我很惊讶 Chrome 仍然可以正常工作。
2. 我认为这里的主要问题是您的外部样式表包含 url(#gradient) . Firefox 将其解释为相对于样式表，而不是相对于文档。我不确定为什么 Chrome 在这种情况下仍然有效，但也许它会退回到相对于文档进行扩展。

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

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