2012-05-03 3 views
2

Raphael에서 생성 된 SVG 요소의 맨 위에 동적 요소 래핑 및 크기 조정을위한 html 요소가 있습니다.상단에 레이어 된 HTML을 통해 Raphael/SVG 요소 이벤트가 발생합니다.

문제는 html 아래의 SVG 요소에 이벤트 (mousedown, mouseup 등)가 할당되어 있다는 것입니다. SVG 요소 자체는 실제로 dragable이고 raphael.freeTransform 플러그인을 통해 확장 가능합니다.

물론,이 요소는 더 이상 이벤트를 선택하지 않습니다.

저는이 문제를 해결하기 위해 어떤 방법을 모색 중입니다. 솔루션은 크로스 브라우저와 호환되어야하므로 일부 요소가 클릭을 무시하도록 허용하는 최신 브라우저의 새로운 기능 세트는 수용할만한 솔루션이 아닙니다.

참고 : SVG 자체에서 텍스트를 렌더링하여 동일한 기능을 구현하는 모든 방법을 시도했지만, 실제로 동적 인 방식으로 원하는 것을 에뮬레이션 할 수있는 방법이 없습니다 (예 : 텍스트의 크기가 조정되어 사용자로 감싸기). 유형)

내가 현재 생각할 수있는 유일한 해결책은 어떻게 든 foreignObjects를 사용하는 것입니다. 그러나 누군가가 플러그인을 인식하지 못한다면 Raphael은 지원하지 않습니다.

+0

, 완전히 문제의 맥락을 이해하기 어렵다. jsfiddle을 예제와 함께 게시하는 것이 좋습니다./문제의 재 작성. – dwerner

답변

4

당신은 CSS pointer-events의 효과를 찾고 있습니다. 그것은 나중에 웹킷에 추가되었고 IE에 의해 지원되지 않는 모질라 해킹입니다. 레이어가 마우스 이벤트를 가로채는 것을 방지 할 수 있습니다. 크로스 플랫폼에서 작동하도록 할 수있는 방법이 있습니다 (Modenizr이 지원하지만 그 점에 대해서는 언급하지 마십시오). 다른 방법이 고려 : 나를 위해

css 'pointer-events' property alternative for IE

+0

멋진! 나는 포인터 이벤트에 대해 알고 있었지만 실제로는 크로스 브라우저 버전을 사용할 수 있다는 것을 깨닫지 못했습니다! 건배 – gordyr

관련 문제