svg 图像已添加到 DOM，但不可见，除非在 Firebug 中被触摸

Question

我正在尝试为我构建的网络玩具添加功能。它使用原始 javascript 和 SVG。该应用程序具有大量功能，已经使用了一年多，目前居住在 http://stereosketcher.com。当我将图像文件从文件系统拖到屏幕上的特殊位置时，我的新功能应该将 SVG 添加到。我已经完成了拖动、解析和附加，但我的图像没有出现。不是它不在标记中，它在标记中，只是我无法看到图像。

我会怀疑某种分层或不透明度问题或其他问题，除了我可以使用两个奇怪的技巧来使图像出现：

只需将整个元素（xlink:href 和所有）复制到其他人的 SVG 编辑器（例如 W3Schools 的 'try it' 编辑器）
使用 Firebug 手动编辑标记，只需触摸的最后几个字符，在“/>”前插入 space 或回车符-return结束标签（删除新字符不会使图像再次消失）

将其添加到文档的函数如下所示：

function applyImageToFaces(data) {
    var image = document.createElementNS("http://www.w3.org/2000/svg", "image");
    image.setAttribute("width","800");
    image.setAttribute("height","800");
    image.setAttribute("xlink:href",data);

    shapeGroup.appendChild(image);
}

有人知道那是什么行为吗？

编辑：即使我将 'data' 替换为普通的 link 也看起来像这样：

<image width="800" height="800" xlink:href="http://thumbs.ebaystatic.com/d/l225/m/m-EuLTQ6AWFEafDhXz9cujA.jpg"/>

它的行为方式完全相同....

Answer 1

拜托。我找到了答案：

我以前试过，但我从命名空间中遗漏了 "http://"，因为我是从这个答案的评论中复制它的：

svg 图像已添加到 DOM，但不可见，除非在 Firebug 中被触摸

svg image is added to DOM, but isn't visible unless touched in Firebug

javascript

firefox

firebug

svg

image

svg 图像已添加到 DOM，但不*可见*，除非在 Firebug 中被触摸

svg image is added to DOM, but isn't *visible* unless touched in Firebug

javascript

firefox

firebug

svg

image

svg 图像已添加到 DOM，但不可见，除非在 Firebug 中被触摸

svg image is added to DOM, but isn't visible unless touched in Firebug