Ken*_*Ken 11 javascript html5 svg
我正在使用本地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内容的命名空间,还是我还缺少其他东西？
原来这是一个命名空间问题:需要使用createElementNS("http://www.w3.org/2000/svg",...)创建元素,Prototype恰好没有内置(new Element( ...)) 支持.所以我猜HTML5 SVG的情况基本上是"没有命名空间的SVG在解析过程中会添加名称空间(但之后它就像之前的XHTML一样)".
PS,这里的"回答您的问题"按钮今天对我不起作用,所以如果有人将此作为答案添加,我会将其标记为正确.:-)
| 归档时间： |
|
| 查看次数： |
4670 次 |
| 最近记录： |