Raphael (SVG) 캔버스를 다른 부서 뒤에 붙여서 클릭 할 수있게 만드시겠습니까?

Question

저는 Raphael을 사용하여 조직도 (또는 흐름도)의 부서간에 선을 만들었지 만 실제로 그 부서와 내용을 클릭 할 수 있어야합니다.

캔버스를 배경 이미지처럼 다른 요소 뒤에 배치 할 수 있다면 아이디어가 될 것입니다. 이것이 가능한가?

Answer 1

해결책을 찾았습니다. Raphael은 내 경우에 절대적으로 배치 된 SVG 캔버스를 만듭니다. 절대 위치는 레이어 역할을하므로 해당 레이어의 맨 위에 있어야하므로 내 콘텐츠도 절대적으로 배치되어야합니다.

다른 사람이 더 좋은 해결책을 가지고 있다면, 잘 듣겠지만, 듣고 싶습니다.

Answer 2

내가하는 일은 렌더링되는 정보 라인 상단에 보이지 않는 (그러나 클릭 할 수있는) 모양의 레이어를 만드는 것입니다.이 레이어는 아래 콘텐츠의 대상 영역으로 사용됩니다.

Raphael에서 대상으로하는 하위 레이어를 만들면 쉽게 복제하고 불투명도를 0으로 설정하고 해당 레이어를 맨 위에 배치 할 수 있습니다. (함께 쉽게 그룹 레이어를하는 방법을 Sets Reference를 참조하십시오.)

예 : 층 라파엘 (단지 HTML)에 의해 렌더링되지 않는 낮은라면

@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 

당신은 아직 할 수있는 유사한 대상이지만, 아래 타겟의 대략적인 좌표 위에 앉아 새로운 (투명한) 모양을 만들어야합니다.