Разбитые штрихи или форма, идущая под другими, после нажатия - Raphael.js - PullRequest
Новая
       10

Разбитые штрихи или форма, идущая под другими, после нажатия - Raphael.js

1 голос
/ 10 июня 2011

Я сделал эту карту , следуя демонстрации на сайте Raphaël.Я хочу, чтобы каждая фигура (отдел) была кликабельной и приводила к странице.Я поставил ссылку, например, на желтую фигуру, более или менее в центре карты.

Вот как это происходит:
Не нажал, форма выглядит великолепно, я нажимаю на нее, она ведет страницу, отлично!Я нажимаю на предыдущую стрелку в моем браузере, чтобы вернуться и снова навести ту же форму, и она ведет себя очень странно.Штрихи кажутся сломанными или форма, идущая под другими ( подробности здесь ).Знаете ли вы, что происходит?

Кроме того, я хотел бы получить ваше мнение и отзывы о вашем опыте работы с картой (удобство использования и совместимость с браузерами (IE?) В основном).

Спасибозаранее за вашу помощь.

1 Ответ

1 голос
/ 15 июня 2011

Причина, по которой это выглядит странно, заключается в том, что, добавив ссылку на элемент, Рафаэль помещает элемент <path> (который определяет форму отдела) в <a href="">. Но его метод toFront() по-прежнему работает на <path>, так что теперь он просто толкает его к передней части <a>, а не к передней части всего набора элементов. Другими словами, .toFront() больше не работает.

Для меня это похоже на ошибку в Рафаэле. Я не уверен, как это исправить, кроме замены каждого вхождения .toFront(), который вы используете, функцией, которая проверяет, есть ли у узла родительский элемент <a>, и если это так, переместите на на передний план (вставив его в DOM).

Кроме того,

В IE он сломан по-другому.

Я думаю, что тот, кто сделал это демо, уже знал об этом, потому что блок if(current) в mouseover исправляет это на примере Австралии. Но анимация масштабирования и ширины обводки, которую вы добавили, также должна быть сброшена.

Если вы замените этот блок if(current) на следующий, он должен работать: 

if (current && current != departement) {
    fra[current].animate({
        fill: "#333",
        stroke: "#666",
        "stroke-width": 1
    }, 500);
    fra[current].scale(1,1)
    document.getElementById(current).style.display = "";
}
...