SVG 在 URL 更改时在 firefox 中消失（jquery.history.js）答案

【问题标题】：SVG disappears in firefox on URL change (jquery.history.js)SVG 在 URL 更改时在 firefox 中消失（jquery.history.js）
【发布时间】：2014-07-02 05:32:07
【问题描述】：

在www.xc-tournament.com/tournament/10，您可以看到桨网球联赛。参与者姓名附近的六边形是svg，背景为实心（会有应用用户个人资料图片）。

当用户点击任何左栏选项时：Clasificación（分类）、Primera Jornada（第一轮）或Información（信息)，或者当用户点击Siguiente（下一个）或Anterior（上一个）时，操作顺序为：

window.History.pushState(...) 使用新网址
如果必须从服务器加载内容（不是这种情况）
- 进行 AJAX 调用以加载它
其他
- hide 主要组件（通过 jQuery）
- show已选中

问题在于，在此操作中，仅在 Firefox（不同版本和操作系统）中，svg 六边形在某些地方会作为左列或分类表消失。 DOM 对象没有改变，我也没有找到任何线索说明它们为什么没有显示。

正如我所说，没有加载任何新内容，只是使用 jQuery 隐藏或显示，并且将 url 更改为维护导航。

¿这是 Firefox 中的错误吗？ ¿ 有什么办法可以避免吗？

【问题讨论】：

请尝试在一个较小的示例中重现此行为，并将其发布到 jsfiddle.net 或类似网站。发布指向实时站点的链接是不可取的，因为 (a) 它使调试变得困难，并且 (b) 当您最终修复它时，这个问题以后可能对其他人没有帮助。
当导航问题受到影响时，我几乎不能在 jsfiddle 中发布它。如果问题得到解决，那么完整的解释就足够有用了。
这是known bug。

标签： jquery firefox svg history.js

【解决方案1】：

您可能有 xml:base 集。 pushState 会影响这一点，这意味着您的 URL 会发生变化。要解决此问题，请在您的填充属性中使用绝对 URL 而不是相对 URL。

Firefox 可以根据各种规范正常工作，但这并不是很有用，我们认为规范应该改变。

【讨论】：

感谢您的回答，但我没有设置xml:base，我已经尝试过使用绝对网址（此时有绝对网址）。
您目前不使用绝对网址。 fill="url(#c9yZlF8ETJufMfuu3K)" 是相对的，您需要使用完整路径。
我尝试在填充属性中使用绝对 URL（我认为绝对 URL 应该是模式定义中的那个）。问题似乎是，当页面 URL 中的参数（而不是它们的值）随着 pushState 更改时，它被解释为 URL 更改并且绝对引用不起作用。
@francadaval 其实这是一个 Firefox 漏洞：bugzilla.mozilla.org/show_bug.cgi?id=652991
@Buzinas 有点像，Firefox 实施了规范，人们抱怨他们有问题，我们与规范人员合作更改规范，我们现在正在将 Firefox 更新为新商定的规范。跨度>