Поместите холст Рафаэля (SVG) позади других подразделений, чтобы сделать их кликабельными?

Question

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

Если бы я мог сделать холст позади других элементов, вроде фонового изображения, это было бы идеей. Это возможно?

Answer 1

Я нашел решение. Рафаэль делает холст SVG, который абсолютно позиционируется в моем случае. Абсолютные позиции действуют как слои, и поэтому, чтобы быть поверх этого слоя, мой контент также должен быть абсолютно позиционирован.

Если у кого-то есть лучшее решение, я был бы рад его услышать, хотя это работает нормально.

Answer 2

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

Если ваши нижние слои-мишени создаются в Рафаэле, вы можете легко их клонировать, установите непрозрачность на 0 и расположите этот слой наверху. (См. Устанавливает ссылку , чтобы легко сгруппировать слои.)

Пример:

@el = @parent.paper.rect(x,y,w,h); //your existing lower layer shape definition
@elTrigger = @el.clone();   //clone your existing shape
@elTrigger.attr
    fill: '#fff'
    opacity: 0
    cursor: 'pointer'
@elTrigger.click(someAction); //assign the function

Если ваш нижний слой не визуализируется Рафаэлем (просто HTML), вы все равно можете сделать что-то похожее, но для этого потребуется просто создать новые (прозрачные) фигуры, чтобы они располагались поверх приблизительной координаты целей ниже .