生成的SVG圖像不顯示

Question

我正在開發一個JavaScript類來顯示所有SVG對象，但是當我創建元素“ image”時，瀏覽器不會顯示它。 雖然如果我復制生成的代碼並將其放在另一個文檔中，則會顯示圖像。

當我使用Firebug的檢查器搜索圖像時，出現了該對象，但未顯示該圖像。

我使用appendChild() ， setAttribute()和setAttributeNS()創建了對象

這是生成的代碼：

<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>

我做錯了什么？

Answer 1

問題是名稱空間。 這是動態創建圖像的正確形式：

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

可以在MDN的“命名空間崩潰課程”中找到更多信息 。