생성 된 SVG 이미지가 표시되지 않습니다.

Question

모든 SVG 객체를 표시하기 위해 JavaScript 클래스를 개발하고 있지만 "이미지"요소를 만들면 브라우저에 표시되지 않습니다. 생성 된 코드를 복사하여 다른 문서에 넣으면 이미지가 표시됩니다.

Firebug의 검사기를 사용하여 이미지를 검색하면 개체가 나타나지만 이미지가 표시되지 않습니다.

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" height="100%" width="100%" > 
<image width="50" height="50" xlink:href="logo.png" y="20" x="20" id="d"></image> 
</svg> 

내가 잘못 뭐하는 거지 :

나는이 생성 된 코드입니다 appendChild(), setAttribute() 및 setAttributeNS()

를 사용하여 객체를 생성?

Answer 1

문제는 네임 스페이스입니다. 이것은 이미지를 동적으로 생성하는 올바른 형식입니다.

image.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', 'flower.png'); 

더 많은 정보는 MDN's 'Namespaces Crash Course'에서 찾을 수 있습니다.