在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中工作）上没有超链接。当我升级到Raphal-2.0时，在IE8中这个数字完全消失了。 Raphael或浏览器是否存在问题以及解决此问题的方法？

Answer 1

正如你可能会或可能不知道的那样，Raphaël为IE6-8生成VML，而在所有其他浏览器上生成SVG。但是，VML和SVG的工作方式完全不同。这在Raphaël中记录得很不充分。

您遇到的问题是由于您正在为元素添加href属性，即ptm.attr({'href':'ptm_sp.php?ptm_sp=h3R2ci'});，因为SVG元素可以以与DOM元素相同的方式具有事件，所以对SVG工作正常。

但是，对于VML，您必须将Raphaël特定的click函数附加到该对象，并在其中产生document.location.href = 'http://URL';。 Raphaël事件列于here，但请忽略关于使用您最喜爱的库的paragaph，因为这对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上发布代码以发展您的编码技能 - 强烈推荐！ :)