我正在使用本地HTML5文件 - 它<!DOCTYPE html>位于顶部.我把这样的东西放在里面:
<svg height="2em" width="3em" preserveAspectRatio="none" viewBox="0 0 100 100">
<rect x="0" y="0" width="100" height="100" fill="red"/>
</svg>
(没有命名空间,感谢HTML5!),它在Chrome和FF4测试版中表现出色.
现在我想通过JS创建相同的东西.我正在使用Prototype,所以我写了类似的东西:
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和Chrome)中看到它正在为此创建相同的DOM结构.
我看到的唯一区别是属性("preserveAspectRatio"和"viewBox")都是小写的,但我尝试将我的第一个测试(静态HTML)中的属性更改为全小写但它仍然可以正常工作,所以我认为这不是问题所在.
HTML5 SVG功能是否仅限于静态HTML,我还需要通过JS添加SVG内容的命名空间,还是我还缺少其他东西？