Question

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

Answer 1

您无法使用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/

Answer 2

href属性具有xlink命名空间，因此您不能只使用setAttribute()。您必须使用setAttibuteNS()。试试这个：

setAttributeNS("http://www.w3.org/1999/xlink", "xlink:href",
               "http://6962mnpm.blox.pl/resource/118392wtf.jpg");

SVG中的<img/>：静态图像可见，但动态不可见

2 个答案: