代码之家  ›  专栏  ›  技术社区  ›  Ken

在HTML5中用JS创建内联SVG

  •  11
  • Ken  · 技术社区  · 14 年前

    <!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 beta中显示得非常好。

    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结构。

    HTML5SVG的功能是否仅限于静态HTML,我还需要通过JS添加SVG内容时使用名称空间,还是缺少了其他功能?

    1 回复  |  直到 14 年前
        1
  •  6
  •   Krzysztof Sikorski    14 年前

    结果发现这是一个名称空间问题:元素需要用createElementNS(“http://www.w3.org/2000/svg”,…)创建,而Prototype恰好没有内置(新元素(…)支持)。所以我猜HTML5 SVG的情况基本上是“没有名称空间的SVG在解析过程中得到了添加的名称空间(但之后它就像之前的XHTML一样)”。

    P、 在美国,这里的“回答你的问题”按钮今天对我不起作用,所以如果有人添加这个作为答案,我会把它标记为正确的。:-)