javascript - SVG中的<image>:可见静态图像，但不动态图像

我的代码中有两只猴子：第一个是静态的（用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>

最佳答案

即使在检查器中看起来正确，也不能使用setAttribute添加命名空间属性。而是使用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/

关于javascript - SVG中的<image>:可见静态图像，但不动态图像，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/23831072/