Raphaeljs在IE8中的支持 [英] Raphaeljs support in IE8

问题描述

我正在使用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中，这个数字完全消失了。这是拉斐尔或浏览器的问题以及解决这个问题的方法吗？

I am creating a dynamic visualization using Raphael-js. I started off with using Raphael-1.5.0 and things seemed to work okay. http://www.iiserpune.ac.in/~coee/histome/variants.php?variant=Histone_H3.1 In particular, the PTMs (little letters on top of large letters) are hyperlinked to their individual pages. While this worked in Chrome, Firefox, and Safari, the hyperlinks were absent on IE8 (worked in IE9). When I upgraded to Raphal-2.0 In IE8 the figure disappeared completely. Is it an issue with Raphael or the browser and any way to get around this?

推荐答案

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

As you may or may not know, Raphaël produces VML for IE6-8, and SVG for all other browsers. However, VML and SVG works quite differently. This is very inadequately documented in Raphaël.

您遇到的问题是由于您要为元素添加href属性，即 ptm.attr（{'href'：'ptm_sp.php？ptm_sp = h3R2ci'}）; ，适用于SVG，因为SVG元素的事件方式与DOM元素相同。

The issue you are experiencing is due to the fact that you are adding an href attribute to the elements, i.e. ptm.attr({'href':'ptm_sp.php?ptm_sp=h3R2ci'});, which works fine for SVG, since SVG elements can have events in the same manner as DOM elements.

但对于VML，您必须将Raphaël特定的点击函数附加到对象，并生成 document.location.href ='http：// URL'; 其中。 Raphaël活动列在这里，但请忽略关于使用您喜爱的图书馆的paragaph，因为这对于VML不正确。

For VML though, you will have to attach the Raphaël specific click function to the object, and produce document.location.href = 'http://URL'; inside of that. The Raphaël events are listed here, but please ignore the paragaph about using your favourite library, as this is incorrect for VML.

可帮助您解决问题的示例代码：

Example code that should help you solve your problem:

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

---

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

---

Also, I couldn't help noticing that you can optimize your code size a bit. Right now, your JS code outputs like this:

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行项目。但是，它可能会增加每个项目一行：

... which increases with 3 lines per item. However, it could increase with one line per item:

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);
}

想一想！在代码审核上发布您的代码，以提高您的编码技能 - 强烈推荐！ ：）

Just a thought! Post your code on Code Review to develop your coding skills - highly recommended! :)

这篇关于Raphaeljs在IE8中的支持的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！