Question

我正在使用本地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内容的命名空间，还是我还缺少其他东西？

Answer 1

原来这是一个命名空间问题：需要使用createElementNS（“http://www.w3.org/2000/svg”，...）创建元素，Prototype恰好没有内置（新元素（...））支持。所以我猜HTML5 SVG情况基本上是“没有命名空间的SVG在解析过程中会添加名称空间（但之后它就像之前的XHTML一样）”。

P.S。，这里的“回答您的问题”按钮今天对我不起作用，所以如果有人将此作为答案添加，我会将其标记为正确。： - ）

在HTML5中使用JS创建内联SVG

1 个答案: