html5 js创建svg,在HTML5中使用JS创建内联SVG

我正在使用本地HTML5文件 - 它的顶部有。我把这样的东西放在里面：在HTML5中使用JS创建内联SVG

(没有命名空间，非常感谢HTML5！)，它在Chrome和FF4测试版中表现出色。

现在我想通过JS创建相同的东西。我使用的是样机，所以我写了类似：

var box = new Element('svg', {'width':'3em', 'height':'2em', 'preserveAspectRatio': 'none', 'viewBox': '0 0 100 100'});

box.appendChild(new Element('rect', {fill:'red', x:'0', y:'0', width:'100', height:'100' }));

container.appendChild(box);

我可以在Firebug/DOM检查(包括FF和铬)，它的创建此相同的DOM结构看。

我看到的唯一区别是属性(“preserveAspectRatio”和“viewBox”)是全小写的，但我试着将我的第一个测试(静态HTML)中的属性更改为全小写，并且它仍然工作正常，所以我不认为这是问题。

是否将HTML5 SVG功能限制为静态HTML，并且我需要为通过JS添加SVG内容创建名称空间，还是还有其他我缺少的东西？

2010-11-07

Ken

+0

(注释，因为这没有帮助)如果你正在做JavaScript矢量处理，除非你特别需要SVG输出，那么使用''可能更容易。 –

2010-11-07 05:33:00

+0

HTML5规范结合SGML和XML(关于SVG)的方式也让我感到困惑:(我认为你应该直接咨询规范，看看它是否对应该如何处理这种情况有任何评论。如果它看起来好像被错误地处理了，请提交浏览器错误报告。另外，如果你能够提供源文件的链接，我很想好好看看。 –

2010-11-07 10:09:12

+0

另外，我怀疑这是一个问题涉及名称空间，因为“svg”和“rect”都存在于SVG命名空间中，而你的问题意味着它们都得到了渲染，尽管不正确。@preserveAspectRatio另一方面在默认命名空间中，所以你应该不要在名称空间前面加上前缀，即使你想要，我认为这更可能是标签和属性区分大小写的问题。作为第一步，我会在没有Prototype的情况下尝试它，只需使用node.setAttribute/setAttributeNS，看看它是否有效。它可能是一个原型问题。 –

2010-11-07 10:15:58