Question

我正在尝试为我构建的webtoy添加一项功能。它使用原始的javascript和SVG。该应用程序具有一堆功能，已超过一年，并且生活在http://stereosketcher.com。我的新功能应该添加一个SVG＆lt; image＆gt;到＆lt; g＆gt;当我将图像文件从文件系统拖到屏幕上的特殊位置时。我有拖动和解析并附加所有完成，但我的图像没有出现。并不是它不在标记中，它在标记中，只是我不能看到图像。

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

只需复制整个＆lt; image＆gt;元素（xlink：href和all）进入别人的SVG编辑器（就像W3Schools的'试一试'编辑器）
使用Firebug手动编辑标记，只需触摸＆lt; image＆gt;的最后几个字符。在“/＆gt;”之前插入空格或回车符结束标记（删除新字符不会使图像再次消失）

将其添加到文档的功能如下所示：

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);
}

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

编辑：即使我用这样的普通链接替换“数据”，它看起来像是：

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

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

Answer 1

Welp. I found my answer: https://stackoverflow.com/a/26634735/2427417

I had tried that before but I had left out the "http://" from the namespace because I was copying it from the comment on this answer: https://stackoverflow.com/a/12423019/2427417

svg图像被添加到DOM，但不是可见，除非在Firebug

1 个答案:

svg图像被添加到DOM，但不是*可见*，除非在Firebug

1 个答案:

svg图像被添加到DOM，但不是可见，除非在Firebug