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」