在运行时向我的文档添加更多svg元素 [英] Adding more svg elements to my document at runtime
问题描述
我有一个html文件，我正在动态添加am元素，然后是一个矩形。适用于不同的浏览器（忽略IE）。当我尝试使用相同的方法动态创建元素时，它在Chrome或Safari中无效，仅在Opera中有效。我的语法错了，或者webkit可能不支持在运行时添加元素？ （如果我将其声明为标签，则相同的元素可以正常工作）。也许我不应该对这些类型的节点使用appendChild（）？这就是我所拥有的，您应该能够将其转储到html文件中并运行它。如果有人知道如果有办法解决这个问题，那就太棒了：
I have an html file, I'm adding am element to it dynamically, then a rectangle. Works well in the different browsers (ignoring IE). When I try to use the same method to dynamically create an element, it does not work in Chrome or Safari, only in Opera. Is my syntax wrong, or does webkit probably just not support adding elements at runtime? (the same element works fine if I declare it as tags up-front instead). Maybe I'm not supposed to use appendChild() with these types of nodes? Here's what I have, you should be able to dump it into an html file and run it. If anyone has any idea if there's a way around this, it'd be great:
<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>
推荐答案
使用 document.createElementNS（） setAttributeNS（null，...） c>。
You really should use setAttributeNS(null, ...) when using namespace calls like document.createElementNS().
来自 xmlgraphics.apache .org / batik / faq.html
然而，重要的是要知道某些实现会产生
setAttribute（x，y）和setAttributeNS（null，x，y），
之间的区别所以最好使用setAttributeNS，这是在命名空间中设置属性的唯一
保证可互操作的方式
了解DOM实现。
However, it is important to know that some implementations make a difference between setAttribute(x, y) and setAttributeNS(null, x, y), so it is good practice to use setAttributeNS which is the only guaranteed interoperable way of setting attributes in a namespace aware DOM implementation.
这篇关于在运行时向我的文档添加更多svg元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
