D3生成的线性渐变在Firefox/IE中无法使用

Question

D3生成的线性渐变在Firefox/IE中无法使用

4

我正在开发一个将D3与AngularJS指令集成的D3库，名为AngularD3。最近的一个指令允许生成可以绑定到数据并动态更新的渐变。这在除Firefox之外的所有浏览器中都有效。但是，如果我将输出的SVG复制/粘贴到类似JSFiddle的东西中，它就可以工作，因此在静态情况下它很好。

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

这里有一个演示页面，您可以在Chrome和Safari中看到它工作，但在Firefox中无法工作：

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

这段代码可通过Github存储库获得。

D3能够使用基本相同的代码创建适用于Firefox的渐变。您可以在Mike的示例中看到这一点。到目前为止，我唯一发现的区别是linearGradient的动态更新。

这是从Firefox直接复制的SVG<defs>部分，以供参考（已格式化以便阅读）：

<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中测试了这个，但它们也不起作用。

- Chris Nicola

看起来这是与angular-d3相关的一个bug。 - Code Whisperer

你正在创建一个名为lineargradient的元素，而不是linearGradient。由于SVG区分大小写，Firefox是唯一没有错误的东西。 - Robert Longson

我确实注意到了，但我不认为那是问题所在。您可以在这个 D3 示例中看到 Firefox 可以正常工作。这似乎只是 DOM 浏览器显示元素的方式不同。如果您编辑 HTML，则会正确地大写。此外，那个讽刺话完全没有必要。 - Chris Nicola

在http://bl.ocks.org/mbostock/1086421中，linearGradient元素使用正确的大小写创建。这就是为什么它能够正常工作的原因。我的先前评论中没有任何讽刺意味。Chrome、Safari和可能的angular-d3都存在漏洞，这些漏洞在你的问题中得到了证明，而Firefox则没有。 - Robert Longson

Robert，我的代码与Mike的基本相同，不会产生不同的输出。此外，两个示例都没有大小写问题。浏览器（Firefox）的DOM资源管理器似乎只是在显示元素时将其转换为小写，两个示例都证明了这一点。但是，如果您单击以编辑节点，则会看到它的大小写正确。如果有帮助的话，我已经将直接从Firefox的“复制外部HTML”功能中添加的代码放到了我的问题中。 - Chris Nicola

显示剩余3条评论

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Jason Davies · Accepted Answer

这里有几个问题：

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

您可以阅读更多关于Firefox处理部分URL的方式的内容。我认为它正确地解释了规范，而WebKit则没有。

至于修复方法，我尝试了url(../#gradient)，但这在Firefox中起作用，在Chrome / WebKit中则不起作用。您可以改用内联的style ="url(#gradient)"。