SVG 基础API

【转】SVG 学习<四> 基础API

JS代码

        // 容器
        var box = document.getElementById("box");
        // 创建svg
        var svg = document.createElementNS("http://www.w3.org/2000/svg","svg");
        // svg添加到容器
        box.appendChild(svg);
        // 创建图形
        var rect = document.createElementNS("http://www.w3.org/2000/svg","rect");
        // 设置矩形属性
        rect.setAttribute("x","10");
        rect.setAttribute("y","10");
        rect.setAttribute("width","300");
        rect.setAttribute("height","150");
        rect.setAttribute("height","150");
        rect.setAttribute("fill","black");
        // 添加图形到svg
        svg.appendChild(rect);

HTML代码

<div id="box"></div>

 

svg 的dom命名空间和其他dom元素不一样。创建svg 元素需要用 createElementNS(namespace, ele);  namespace 一般为“http://www.w3.org/2000/svg”