2017-01-24 8 views
0

내 HTML에 SVG 이미지를 추가하고 SVG의 JavaScript를 실행하고 싶습니다.) (JavaScript로 DOM에 추가 된 SVG 이미지에서 JavaScript가 실행되도록 할 수 있습니까?

<!DOCTYPE html> 
<html> 

<head> 
    <title>Test SVG</title> 
    <script type="text/javascript"> 
     var listener = function(response) { 
      document.getElementById('output').innerHTML = this.responseText; 
     }; 
     var request = new XMLHttpRequest(); 
     request.addEventListener('load', listener); 
     request.open('GET', 'https://cdn.rawgit.com/jormaturkenburg/42bf377e390839b6fd75745403fface7/raw/4c851457ae03f0b416d122b7538bc6d9dc794954/circle.svg'); 
     request.send(); 
    </script> 
</head> 
<body> 
    <div>Hello world!</div> 
    <div id="output"> 
     Inner HTML 
    </div> 
</body> 
</html> 

Fiddle

SVG 이미지가 CONSOLE.LOG()와 경고가 있습니다

의 내가 this image을 가져오고 같은 내 HTML에 드롭하고 싶은 가정 해 봅시다 스크립트 태그에 이미지를 볼 때 잘 실행되지만 자바 스크립트로 이미지를 HTML에 추가 할 때는 실행되지 않습니다. 이 작업을 수행하고 JavaScript를 실행할 수있는 방법이 있습니까?

내가 이미지를 포함한다면 실행 하겠지만 JavaScript로 인라인해야합니다.

+0

@RobertLongson에서 JavaScript는 SVG 이미지의 스크립트 태그에 있습니다. 어떻게해야합니까? [이 이미지]의 출처를 보면 (https://rawgit.com/jormaturkenburg/42bf377e390839b6fd75745403fface7/raw/4272d10bd974f646e2400d4c7e5d31ab7b6ded5a/circle.svg). 기능 테스트가 있습니다. SVG를로드 한 후 페이지에서 test()를 호출하면 오류가 발생합니다. 이 기능을 사용하는 다른 방법이 있습니까? –

+0

그건 내 질문이다. 어떻게해야합니까? 전역 범위에서 test()를 호출하려고 시도했지만 작동하지 않습니다. #output div에 innerHTML으로 설정 한 후 SVG 객체에 연결할 수 있지만 그 다음은 무엇입니까? –

+0

중복에 따라 나는이 질문을에 연결했다. –

답변

0
<body>  
<object id="svgholder" data="some.svg" type="image/svg+xml""></object> 
</body> 


var svgholder = $('body').find("object#svgholder"); 

svgholder.load("image/svg+xml", function() { 
    alert("some svg loaded"); 
}); 
+0

이 코드 단편은 질문을 해결할 수 있지만 [설명 포함] (// meta.stackexchange.com/questions/114762/explaining-entirely-code-based-answers) 정말 게시물의 품질을 향상시키는 데 도움이됩니다. 앞으로 독자의 질문에 답하고 있으며 코드 제안의 이유를 알지 못할 수도 있습니다. 또한 주석을 설명하기 위해 코드를 군중시키지 마십시오. 그러면 코드와 설명 모두 가독성이 떨어집니다! – kayess