internet-explorer-8 - IE8 中的 Raphaeljs 支持

Question

我正在使用 Raphael-js 创建动态可视化。我开始使用 Raphael-1.5.0，一切似乎都正常。 http://www.iiserpune.ac.in/~coee/histome/variants.php?variant=Histone_H3.1特别是，PTM(大字母上面的小字母)超链接到它们各自的页面。虽然这在 Chrome、Firefox 和 Safari 中有效，但超链接在 IE8 中不存在(在 IE9 中有效)。当我在 IE8 中升级到 Raphal-2.0 时，这个数字完全消失了。这是 Raphael 还是浏览器的问题，有什么办法可以解决这个问题？

Answer 1

您可能知道也可能不知道，Raphaël 为 IE6-8 生成 VML，为所有其他浏览器生成 SVG。然而，VML 和 SVG 的工作方式完全不同。这在 Raphaël 中的记录非常不充分。

您遇到的问题是由于您向元素添加了 href 属性，即 ptm.attr({'href':'ptm_sp.php?ptm_sp=h3R2ci'});，它适用于 SVG，因为 SVG 元素可以以与 DOM 元素相同的方式拥有事件。

但对于 VML，您必须将 Raphaël 特定的 click 函数附加到对象，并生成 document.location.href = 'http://URL'; 在里面。列出了拉斐尔事件 here , 但请忽略关于使用您最喜欢的库的段落，因为这对于 VML 是不正确的。

应该可以帮助您解决问题的示例代码:

ptm.click(function(){
    location.href = 'ptm_sp.php?ptm_sp=h3R2ci';
});

---

另外，我不禁注意到您可以稍微优化一下代码大小。现在，您的 JS 代码输出如下:

var ptm = paper.text(13.791304347826, 35, 'me2');
ptm.attr({'font-size':9});
ptm.attr({'href':'ptm_sp.php?ptm_sp=H3R2me2'});

var t = paper.text(13.791304347826, 70, 'R');
t.attr({'font-size':16});

var num = paper.text(13.791304347826, 85, '2');
num.attr({'font-size':9});

// etc.

... 每项增加 3 行。但是，它可能会随着每个项目一行而增加:

var t = []; // texts
t.push([13.791304347826, 35, 'me2', 9, 'ptm_sp.php?ptm_sp=H3R2me2']);
t.push([13.791304347826, 70, 'R', 16]);
t.push([13.791304347826, 85, '2', 9]);

for(var i = 0; i < t.length; i++){
    var tt = paper.text(t[i][0], t[i][1], t[i][2]);
    var ta = {};
    if(t[i][3]) ta['font-size'] = t[i][3];
    if(t[i][4]) ta['href'] = t[i][3];
    tt.attr(ta);
}

只是一个想法!在 Code Review 上发布您的代码发展您的编码技能 - 强烈推荐! :)