Поддержка Raphaeljs в IE8 - PullRequest
Новая
       25

Поддержка Raphaeljs в IE8

2 голосов
/ 17 мая 2011

Я создаю динамическую визуализацию, используя 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 фигура полностью исчезла. Это проблема с Рафаэлем или браузером, и есть ли способ обойти это?

1 Ответ

11 голосов
/ 18 мая 2011

Как вы можете знать или не знать, Raphaël производит VML для IE6-8 и 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';.События Raphaël перечислены здесь , но, пожалуйста, игнорируйте парагаф об использовании вашей любимой библиотеки, так как это неправильно для 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 , чтобы развить свои навыки кодирования - настоятельно рекомендуется!:)

...