D3生成linearGradient在Firefox / IE中不工作

问题描述

我正在开发一个D3库，它集成了D3和AngularJS指令，名为。最近的指令之一允许生成可以绑定到数据并动态更新的渐变。这似乎适用于除Firefox之外的每个浏览器。

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:

此代码可通过访问。

D3能够使用大部分相同的代码创建适用于Firefox的渐变。您可以在中看到这一点。到目前为止，我唯一的区别是对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.

这里是< 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中测试过，这些都不工作。

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

推荐答案

这里有几个问题：

1. 似乎在文档中具有相同ID的多个元素;您的< d3-gradient> 元素也具有 gradient 的I​​D。我很惊讶Chrome仍然可以工作，尽管这样。


2. 我认为这里的主要问题是您的外部样式表包含 url（#gradient）。 Firefox将此解释为相对于样式表，而不是相对于文档。我不知道为什么Chrome在这种情况下仍然可以正常工作，但也许会回到相对于文档扩展它。

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.

可以详细了解。我相信它正确解释规范，而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（../# gradient ），但这在Firefox而不是Chrome / WebKit。您可以改为使用内联 style =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中不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！