2011-10-05 7 views
6

SVG 문서가 있고이 스크립트에 <script> 태그를 사용하여 스크립트를 포함 할 수 있기를 원합니다. 이 스크립트에서는 문서가로드되어 조작 할 수있을 때 호출 될 함수를 설정하려고합니다.SVG : 문서가로드 될 때 스크립트 실행

HTML과 JQuery로이 작업을 수행했다면 $(document).ready(...)을 사용했을 것입니다. 나는 SVG 문서 내에서 동일한 작업을 수행하려고하지만 분명히 같은 방식으로 JQuery를 사용할 수 없다.

test.svg :

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg"> 
    <script type="text/ecmascript" xlink:href="myscript.js" /> 

    <!-- Rest of SVG body goes here --> 
</svg> 

myscript.js : 내가 원하는

function init(evt) { 
    var svgDocument = evt.target.ownerDocument; 
    var svgRoot = svgDocument.documentElement; 
    // Manipulate SVG DOM here 
} 

// --> Somehow attach init() function to onload event of SVG <-- 

내가 무엇을 찾고 요약

은 같은 것입니다 스크립트에서 명시 적으로에 의존하기보다는 시도하고 시도하십시오.은 SVG 정의에 있습니다. (스크립트가 어떻게 작동하는지에 대한 지식이 없어도 여러 SVG에 포함될 수있는 스크립트를 작성하고 싶습니다.)

답변

2

아마도 'onload'는 찾고있는 이벤트입니다. 봐 여기

+0

아마,하지만 ** 이벤트를 SVG 내에서 ** (또는 적어도 '

6

here는 예를

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg" onload='init(evt)'> 
<script type="text/ecmascript"> 
function init(evt) { 
var svgDocument = evt.target.ownerDocument; 
var svgRoot = svgDocument.documentElement; 
// Do whatever you like on svgRoot to manipulate your SVG DOM 
} 
</script> 
</svg> 
+0

감사합니다. 그것은 대략 내가 달성하기를 원하는 것입니다. 그러나 내가하고 싶은 것은''태그에'onload = "..."'를 추가하지 않아도된다. 이 질문을 명확하게하기 위해 원래 질문을 업데이트했습니다 (희망!). – FixMaker

2

아무것도 없다 (그러나 IE)는 표준 DOM 이벤트 SVG에 포함 된 JS에서 핸들러 사용에서 당신을 방해 : 당신은 일반적으로 사용하는, IE의 경우

document.addEventListener('load', init); 

attachEvent 정도이지만, IE (> = 9)가 SVG에서 이것을 지원하는지 모르겠다.

대부분 SVG 파일은 독립형이므로 DOMReady (일명 DOMContentLoaded)와로드 이벤트는 별개로 제공되지 않습니다 (CSS 파일과 이미지를 수십 개로드해야하는 HTML과 비교). 따라서로드를 사용하는 것과 DOMReady 이벤트 (불행히도 아직 표준화되지 않은 안정적인 이벤트) 대신 이벤트가 무시됩니다. 내가 시도한 적이없는 것 외에도, SVG의 DOM이로드 될 때 브라우저가 DOMReady 이벤트를 발생시키는 경우도 있습니다.

2

svg 문서의 맨 끝에 스크립트를 포함 시키면로드 이벤트를 기다릴 필요가 없습니다. 그러나 스크립트가 실행될 때 아직로드되지 않은 파일에서 외부 파일을 참조하는 경우이 작업이 실패 할 수 있습니다.

관련 문제