<image> SVG : 정적 이미지가 표시되지만 동적이 아닙니다.

Question

내 코드에 두 개의 원숭이가 있습니다. 첫 번째는 정적인데 (SVG 태그로 작성) 괜찮습니다.하지만 두 번째는 JS로 생성됩니다. 두 태그 모두의 코드는 실행 후에도 동일하지만. 그게 어떻게 가능해? 어떻게 해결할 수 있습니까?

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"> 

    <image xlink:href="http://6962mnpm.blox.pl/resource/118392wtf.jpg" 
    height="250px" width="250px" x="100px"></image> 

</svg> 

<script> 
    var test = document.createElementNS("http://www.w3.org/2000/svg", "image"); 
    test.setAttribute("xlink:href", 
     "http://6962mnpm.blox.pl/resource/118392wtf.jpg"); 
    test.setAttribute("height", "250px"); 
    test.setAttribute("width", "250px"); 
    test.setAttribute("x", "400px"); 
    document.querySelector("svg").appendChild(test); 
</script> 

Answer 1

, 그것은 바로 검사관에 보이는하더라도. 대신 setAttributeNS를 다음과 같이 사용하십시오 :

setAttributeNS('http://www.w3.org/1999/xlink','href','http://6962mnpm.blox.pl/resource/118392wtf.jpg'); 

이제 원숭이가 올바르게 렌더링되어야합니다.

var SVGDaddy = "http://www.w3.org/2000/svg"; 
var TESTOBRAZKA = document.createElementNS(SVGDaddy, "image"); 
with(TESTOBRAZKA) { 
    setAttributeNS('http://www.w3.org/1999/xlink','href','http://6962mnpm.blox.pl/resource/118392wtf.jpg'); 
    setAttribute("height", "250px"); 
    setAttribute("width", "250px"); 
    setAttribute("x", "100px"); 
} 
document.querySelector("svg").appendChild(TESTOBRAZKA); 

데모 : http://jsfiddle.net/Palpatim/kGy5d/

Answer 2

href 속성은 xlink 네임 스페이스를 가지고, 그래서 당신은 단지 setAttribute()을 사용할 수 없습니다. setAttibuteNS()을 사용해야합니다. 대신보십시오 : 당신은 네임 스페이스 속성을 추가 setAttribute을 사용할 수 없습니다

setAttributeNS("http://www.w3.org/1999/xlink", "xlink:href", 
       "http://6962mnpm.blox.pl/resource/118392wtf.jpg");