Кросбраузерное рисование многоугольников.

[denisator]

Хочу сделать небольшую интерактивную карту посёлка на JS, со скролом и зумом.

В нижнем слое картинка, а в верхнем нарезанные полупрозрачные участки на которые можно наводить курсор, кликать и всё такое.

 

Вот, не могу определиться чем рисовать эти участки. Хорошо бы, конечно, canvas, но судя по статистике он не будет работать примерно у 10% пользвателей, 8% из которых это IE8. Та же история и с SVG. Map и area тоже нельзя использовать так как участки получаются прозрачными.

 

Подскажите, пожалуйста, максимально кросбраузерный вариант решения задачи.

[sigma77]

Для svg есть шикарная библиотечка - http://raphaeljs.com/

В принципе есть реализации карт и на чистом css, но тут надо видеть саму картинку. Тем более, что всё равно предполагается скролл/зум и прочиё js. Также можно рассмотреть вариант - карта на основе гугл или яндекс карт. Там тоже можно добавлять и свои объекты и рисовать фигуры.

[denisator]

  On 12/4/2013 at 11:43 AM, sigma77 said:

Для svg есть шикарная библиотечка - http://raphaeljs.com/

В принципе есть реализации карт и на чистом css, но тут надо видеть саму картинку. Тем более, что всё равно предполагается скролл/зум и прочиё js. Также можно рассмотреть вариант - карта на основе гугл или яндекс карт. Там тоже можно добавлять и свои объекты и рисовать фигуры.

 

У меня есть небольшой движочек карты на флэше http://denisator.ru/trash/map7/, но флэш не работает у 15-20% пользователей (и в часности на технике эпл) и я хочу переписать его на JS в максимально кросбраузерном виде.

 

Рафаелис достаточно избыточный, а как он рисует в ИЕ6, ведь в нём не поддерживатеся SVG?

Edited December 4, 2013 by denisator

[sigma77]

  On 12/4/2013 at 11:55 AM, denisator said:

Рафаелис достаточно избыточный, а как он рисует в ИЕ6, ведь в нём не поддерживатеся SVG?

Для него он конвертит vml

  On 12/4/2013 at 11:55 AM, denisator said:

У меня есть небольшой движочек карты на флэше http://denisator.ru/trash/map7/,

Кстати, такую вещь вполне реально написать на базе яндекс/гугл карт. И скорее более правильно

http://svo.aero/transport/ - схема аэропорта шереметьево на базе яндекс-карт

Edited December 4, 2013 by sigma77