D3生成的LinearGradient在Firefox / IE浏览器不工作 [英] D3 generated linearGradient not working in Firefox/IE

问题描述

我的工作是维生素D3 AngularJS指令称为 AngularD3 集成了D3库。一个最近的指令允许产生梯度可以绑定到数据和动态地更新。这似乎在除了火狐浏览器的每一个工作。但是，如果我复制/输出SVG粘贴到类似的jsfiddle它的工作原理，所以静态它的罚款。

I'm working on a D3 library that integrates D3 with AngularJS directives called AngularD3. One of the recent directives allows gradients to be generated that can be bound to data and update dynamically. This seems to work on every browser except Firefox. However, if I copy/paste the output SVG into something like JSFiddle it works, so statically it's fine.

难道这是一个限制/错误与Firefox处理动态更新SVG？

Could this be a limitation/bug with Firefox handling dynamic updates to the SVG?

下面是一个演示页面，您可以看到Chrome和Safari这个工作，但不能在Firefox：

Here is a demo page where you can see this working in Chrome and Safari but not in Firefox:

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

这code是可通过 GitHub的库。

D3是能够创建做使用Firefox大致相同code工作梯度。您可以在迈克的例子这里看到这一点。我能找到到目前为止，唯一的区别是动态更新的LinearGradient。

D3 is able to create gradients that do work with Firefox using largely the same code. You can see this in Mike's example here. The only difference I can find so far is the dynamic updates to the linearGradient.

下面是＆LT; D​​EFS＆GT; 在DOM资源管理器，以供参考使用复制外的html，直接从Firefox复制的SVG的部分（格式化以提高可读性）：

Here is the <defs> section of the SVG copied directly from Firefox using "copy outer html" in the DOM explorer for reference (formatted for readability):

<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以及那些不工作的。

Recently tested this in IE 10 and 11 and those do not work either.

推荐答案

有几个问题在这里：

1. 您似乎有相同的ID文件中的多个元素;你的＆LT; D​​3-梯度GT; 元素有梯度的ID 太。我很惊讶的Chrome仍然有效，尽管这一点。


2. 我觉得这里的主要问题是外部样式表包含 URL（#gradient）。火狐间$ P $点这是故意的相对于样式表，而不是相对于文档。我不知道为什么铬在这种情况下仍然工作，但也许它退到扩展它相对于文档。

1. You seem to have multiple elements in the document with the same ID; your <d3-gradient> element has an ID of gradient too. I'm surprised Chrome still works despite this.
2. I think the main issue here is that your external stylesheet contains url(#gradient). Firefox interprets this as being relative to the stylesheet, rather than relative to the document. I'm not sure why Chrome still works in this scenario, but perhaps it falls back to expanding it relative to the document.

您可以阅读更多的了解 Firefox的处理部分的URL 的。我相信这是间$ P $正确pting规范，而WebKit是不是。

You can read a bit more about Firefox's handling of partial URLs. I believe it is interpreting the specification correctly, while WebKit isn't.

至于修复，我试过 URL（../#梯度），但这个工作在Firefox和Chrome的不/ WebKit的。你可以使用内联风格=URL（#gradient）代替。

As for the fix, I tried url(../#gradient), but this worked in Firefox and not Chrome/WebKit. You could use an inline style="url(#gradient)" instead.

这篇关于D3生成的LinearGradient在Firefox / IE浏览器不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！