SVG 学习<四> 基础API

目录

SVG 学习<一>基础图形及线段

SVG 学习<二>进阶 SVG世界，视野，视窗 stroke属性 svg分组

SVG 学习<三>渐变

SVG 学习<四> 基础API

SVG 学习<五> SVG动画

SVG 学习<六> SVG的transform

SVG 学习<七> SVG的路径——path(1)直线命令、弧线命令

SVG 学习<八> SVG的路径——path(2)贝塞尔曲线命令、光滑贝塞尔曲线命令

（转）利用 SVG 和 CSS3 实现有趣的边框动画

++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

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”