Z-индекс Raphael SVG/vml с элементами html

У меня есть html-контейнер с абсолютным позиционированием div. У этих div есть события щелчка, которые рисуют стрелки raphael svg/vml между ними, однако, если я заставлю raphael появиться в верхней части html с индексом z, я больше не смогу щелкнуть html div, если я оставлю его позади html, я не могу видеть стрелки.

Можно ли в любом случае отображать мои стрелки поверх HTML, но при этом иметь возможность щелкнуть нижележащий HTML?

У меня такое ощущение, что это невозможно сделать, и лучшее решение - создать элементы div в raphael. кто-нибудь может помочь?

Мне нужно, чтобы решение работало во всех браузерах, включая IE6 и выше.


javascript svg html raphael vml
person Jason    schedule 01.03.2013    source источник
comment
Ваша интуиция верна, вам нужно воссоздать ваши divs в rects в Raphael, если вам нужна поддержка IE6+. В противном случае вы можете поместить svg {pointer-events: none} в свой CSS (поддерживается только webkit и FF).   -  person methodofaction    schedule 01.03.2013

Ответы (1)


arrow_upward
0
arrow_downward

Да, преобразование в объекты — самое простое решение, как предлагает @Duopixel. Я полагаю, вы могли бы также сделать s прозрачными и держать их сверху.

Недостаток этого заключается в том, что вам нужно вручную вставлять разрывы строк, если элементы div содержат многострочный текст. Если это так, вы можете рассмотреть возможность использования нескольких холстов. Вы можете оставить элементы div как есть и вставить между ними дополнительные элементы div, каждый из которых содержит собственный объект Raphael для рисования стрелок между блоками. Хотя в большинстве примеров Raphael используется большой прямоугольный холст шириной с страницу, это не обязательно.

person Chris Wilson    schedule 03.03.2013