HTML에 임베드 된 SVG 코드 드래그 앤 드롭

Question

SVG 파일을 HTML 문서에 삽입했습니다. HTML 및 svg의 요소에 ID 및 클래스를 사용하여 javascript에 액세스 할 수 있습니다. 그러나 임베디드 svg에 끌어서 놓기를 수행하려고합니다. 나는 http://svg-whiz.com/svg/DragAndDrop.svg에서 다음 예제를 사용하여 SVG를 자바 스크립트에서 분리했지만 SVG를 HTML에 삽입 할 때 문제가 발생합니다. 내가 작업 드래그 앤 드롭 루틴을 얻을 수 있도록 HTML의 SVG의 루트에 접근 할 필요가

onload="initSVG(evt)" 

을 포함 할 때 SVG의 초기화 기능이 작동하지 않습니다. 독립 SVG의 원래 코드는 이렇게 기록 된 다음 오류를 제공

function initSVG() 
{ 
SVGRoot = document.getElementsByTagName("svg"); 
TrueCoords = SVGRoot.createSVGPoint(); 
GrabPoint = SVGRoot.createSVGPoint(); 
} 

: 그것이 onload 이벤트를 호출하지 않고 실행할 수 있도록

function initSVG(evt) 
{ 
SVGDocument = evt.target.ownerDocument; 
SVGRoot = SVGDocument.documentElement; 
TrueCoords = SVGRoot.createSVGPoint(); 
GrabPoint = SVGRoot.createSVGPoint(); 
} 

내 재 작성, 같은과 같다 " Object #에 'CreateSVGPoint'메소드가 없습니다. 따라서 독립 SVG와 같은 방식으로 가져온 SVG를 다루는 것처럼 보이지 않습니다. SVGRoot를 얻으려면 어떻게해야합니까?

감사합니다.

P. 아마 내가 jquery를 사용해야한다는 것을 알고 있지만 원시 DOM을 배우고 싶었습니다.

Answer 1

getElementsByTagName 함수는 요소가 아닌 NodeList을 반환합니다. 시도 :

SVGRoot = document.getElementsByTagName("svg")[0];