D3 生成的线性渐变在 Firefox/IE 中不起作用

Posted 2023-03-06

【中文标题】D3 生成的线性渐变在 Firefox/IE 中不起作用

【英文标题】：D3 generated linearGradient not working in Firefox/IE

【发布时间】：2014-11-05 18:33:00

【问题描述】：

我正在开发一个 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 中看到这一点。到目前为止，我能找到的唯一区别是线性渐变的动态更新。

这里是使用 DOM 资源管理器中的“复制外部 html”直接从 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 中对此进行了测试，但也无法正常工作。

【问题讨论】：

看起来这是 angular-d3 的错误

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

我确实注意到了这一点，但我认为这不是问题所在。您可以在 this D3 example 中看到相同的内容，它适用于 Firefox。这似乎只是 DOM 浏览器显示元素的方式。如果您编辑 HTML，它将正确大写。蛇鲨也完全没有必要。

@itcouldevenbeaboat 可能是 Firefox 是我能找到的唯一有此问题的浏览器。您认为这个问题与 D3 有关的任何特殊原因？

在bl.ocks.org/mbostock/1086421 中，linearGradient 元素是用正确的大小写创建的。这就是它起作用的原因。我之前的评论中没有snark。 Chrome、Safari 和大概 angular-d3 都存在您的问题中展示的错误，而 Firefox 则没有。

【参考方案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)"。

【讨论】：

其他浏览器 = webkit 或曾经是 webkit 的东西。 IE9+ 与 Firefox FWIW 的工作方式相同。

谢谢，我已经编辑了答案以使“正确性”注释更清晰。

非常感谢，这是两者的结合。确保没有重复的 id 和将样式更改为 fill: url(/#gradient)。斜线在 Firefox 和 Chrome 中都可以正常工作。我还要测试 IE。

所以在一个有趣的结果中，Firefox 似乎理解 url(/#gradient) 或 url(..#gradient) 甚至 url(../#gradient)，而 IE 似乎只理解 url(#gradient)。 Webkit 似乎接受任何形式。

"你可以使用内联样式="url(#gradient)"代替"，节省我的一天！