Question

我有一个html文件，我正在动态添加am元素，然后是一个矩形。适用于不同的浏览器（忽略IE）。当我尝试使用相同的方法动态创建元素时，它在Chrome或Safari中无效，仅在Opera中有效。我的语法错了，或者webkit可能不支持在运行时添加元素？（如果我将其声明为标签，则相同的元素可以正常工作）。也许我不应该对这些类型的节点使用appendChild（）？这就是我所拥有的，您应该能够将其转储到html文件中并运行它。如果有人知道如果有办法解决这个问题，那就太棒了：

<html>
<head>
  <script>

    window.onload = function() {
        var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
        svg.setAttribute('xmlns:xlink', 'http://www.w3.org/1999/xlink');
        svg.setAttribute('version', '1.1');
        svg.setAttribute('width', '800px');
        svg.setAttribute('height', '400px');
        document.body.appendChild(svg);

        var rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
        rect.setAttribute("id", "myrect"); 
        rect.setAttribute("fill","red");
        rect.setAttribute("stroke","black");
        rect.setAttribute("stroke-width","5");
        rect.setAttribute("x", "100");
        rect.setAttribute("y", "100");
        rect.setAttribute("width", "100");
        rect.setAttribute("height", "50");
        svg.appendChild(rect);

        var anim = document.createElementNS('http://www.w3.org/2000/svg','animate');
        anim.setAttribute("attributeName", "width");
        anim.setAttribute("from", "100");
        anim.setAttribute("to", "400");
        anim.setAttribute("dur", "10s");
        anim.setAttribute("begin", "0s");
        anim.setAttribute("fill", "freeze");
        rect.appendChild(anim);
    }

</script>
</head>

<body>
</body>

Answer 1

在使用setAttributeNS(null, ...)等命名空间调用时，您确实应该使用document.createElementNS()。

来自xmlgraphics.apache.org/batik/faq.html

但是，重要的是要知道某些实现会产生一个 setAttribute（x，y）和setAttributeNS（null，x，y）之间的区别，所以最好使用setAttributeNS，这是唯一的保证在命名空间中设置属性的可互操作方式了解DOM实现。

Answer 2

呃这看起来像是webkit中的一个bug。您必须调用node.beginElement（）来启动动画，但在webkit中它不起作用，会出现在错误跟踪器中。

高炉。

在运行时向我的文档添加更多svg元素

2 个答案: