jQuery는 JavaScript가있는 HTML 페이지에서 사용하도록 설계되었습니다.SVG 문서가있는 jQuery
SVG는 HTML과 동일한 DOM 레벨 2를 사용하지만 XML 기반이며 ECMAScript를 지정합니다.
SVG에서 jQuery를 사용하면 어떤 문제가 발생할 수 있습니까? 이러한 SVG를 HTML 문서에 요소로 포함시키는 것이 바람직합니까?
참고로 jQuery 구문을 사용하여 HTML 문서의 SVG 요소를 그래픽 포트로 조작하는 "jQuery SVG"그리기 라이브러리는 언급하지 않았습니다. 내가 원한 것은 jQuery 선택자와 이벤트 관리를 SVG 요소에 사용하는 것이다. SVG 루트는 HTML 내부에있을 수도 있고 그렇지 않을 수도있다.
시도해 보면 선택기가 작동하지만 다른 것은 작동하지 않는 것 같습니다. SVG는 SVGLoad 이벤트를 상단 <svg> 요소로 전달하기 때문에 페이지를 초기화하는 $(function() { }) 관용구가 작동하지 않습니다. 그래도 $('svg').bind('SVGLoad', function(){})이 작동합니다.
.append으로 동적으로 요소를 추가하면 적어도 Firefox에서는 렌더링되지 않도록 DOM에 넣습니다. 팬텀 요소는 jQuery없이 동적으로 추가 된 요소를 포함하여 문서가 다시 렌더링 된 후에도 보이지 않습니다. $().attr(key, value)은 속성을 변경할 수 있지만 화면 디스플레이를 업데이트하지는 않습니다.
모두 불행하게도 문제가있는 것처럼 보입니다. 더 많은 기능은 XHTML 문서에 삽입 된 후에 작동합니다. 그러나 위와 같은 결함이 남아 있으며 아마 다른 프레임 워크를 사용하는 것이 좋습니다. 어쩌면 jQuery SVG에 다른 모습을 줄 수도 있습니다 ...
Re : 자바 스크립트와 ecmascript의 혼동 (예 : http://stackoverflow.com/questions/912479/what-is-the-difference-between-javascript-and-ecmascript). –
가능한 복제본 : http://stackoverflow.com/questions/2294801/jquery-under-svg. 어쨌든 왜 D3.js를 대신 사용해보십시오. D3에는 쉬운 이벤트 바인딩과 선택기가 모두 있습니다. 특히 SVG를 지원하지 않는 브라우저에는별로 관심이없는 것처럼 보입니다. –
@ ErikDahlström 오, 감사합니다! – Potatoswatter