javascript - 当 <base> 标签包含在 HTML head 中时，FusionCharts 无法正确呈现

Question

我正在使用 AngularJS和 FusionCharts在我的网络应用程序中。即将发布的 AngularJS v1.3.0 will require there to be a <base> tag in the HTML head ，以便解析所有相关链接，而不管应用程序托管在站点目录中的何处。

包含 <base> 时使用最新版本的 FusionCharts(当前为 v3.4.0)标记，3D 图表无法正确呈现。例如，出现一个 3D 饼图并具有旋转和可单击的切片，以及切片内边缘上的工具提示和颜色。然而，整个外部颜色是黑色的。

不包括 <base>标记使图表看起来和行为正常。

有没有人知道如何解决这个问题？不幸的是，我没有源代码，否则我会自己破解它。

这是非工作 jsFiddle 的链接:http://jsfiddle.net/aaronaudic/59Bmf/207

解决方案:

我最初将正确的解决方案授予@pankaj，因为他在页面加载时简单地添加以下行的解决方案似乎解决了问题:

document.getElementsByTagName("base")[0].setAttribute("href", window.location.pathname+window.location.search);

但是，这仅在图表位于初始加载页面上时有效(当用户直接导航到包含图表的页面时)；当通过类似 ui-router 的方式导航到页面时，我仍然看到黑色。

正确答案来自@Shamasis。将以下内容添加到页面加载将解决整个应用程序的问题:

eve.on('raphael.new', function () {
    this.raphael._url = this.raphael._g.win.location.href.replace(/#.*?$/, '');
});

他最初的警告提到导出功能可能会受到云端的阻碍，这可能是(我不从云端导出)。然而，本地导出，正如在这个 jsFiddle 中所观察到的，效果非常好:http://jsfiddle.net/aaronaudic/Gs6sN/14

我的基本标签，在页面的头部，很简单:

<base href="/">

Answer 1

问题主要不在于 FusionCharts - 它是一个通用的 SVG问题。在 SVG ，当对一个元素应用渐变色时，它实际上“引用”了页面上的另一个渐变元素。这有点类似于链接如何使用 <a id="hash" /> 引用主题标签。在页面上。

现在，当您设置 <base>到页面，引用资料乱七八糟。渐变现在引用一个带有 URL 的元素，如您的 base 中提供的那样。标签。

解决此问题的一种方法是访问内部图形渲染器并将 URL 硬设置为页面的绝对位置。这样做的方法是访问 RedRaphael FusionCharts 内的对象核心并设置_url相同的变量。

下面的代码应该可以为您完成。

eve.on('raphael.new', function () {
    this.raphael._url = this.raphael._g.win.location.href.replace(/#.*?$/, '');
});

唯一需要注意的是，指定绝对 URL 作为对渐变元素的引用在某些较旧的浏览器中不起作用(我不确定 - 可能是 Safari 5 或 FF 3.0)。在将 FusionCharts 导出为图像时，它也可能会产生一些负面影响 - 当 SVG 在 FusionCharts Cloud Export 服务器上栅格化时，相对 URL 将失效。