【公告】網站目前停止所有的課程訂閱服務,原有學員權益不受影響,造成不便還請見諒,我們正在打造更多課程以及圖書,包含 Python 為主的課程主題,未來將會合併且擴充目前的課程內容,提供全新課程訂閱服務,感謝學員的支持。

SVG 程式化控制

我們可以透過 JavaScript 控制 SVG 元素,動態建立、甚至調整其中的內容,例如以下的範例:



點擊左下方的按鈕,逐步縮減圓形的半徑直到最後消失。

就如同DOM元素,SVG元素可以透過JavaScript進行維護操作,寫法與一般的DOM元素無異,不過必須指定命名空間,無論元素的建立或是屬性的設定都必須調用命名空間的版本。

來看以下的程式片段:

var ns = "http://www.w3.org/2000/svg";
var circle = document.createElementNS(ns, "circle");

其中第一行指定了需要的命名空間字串資訊,第二行則調用createElementNS() 方法建立一個circle元素,並且將命名空間字串當作參數傳入。

建立SVG元素之後,必須再進一步設定標籤的屬性,這需要利用 setAttributeNS() 方法,如下式:

circle.setAttributeNS(null,"cx",300);

這一行程式碼,針對上述建立的 circle ,設定 cx 屬性,這會指定圓形的 x 座標,第一個參數指定 null 即可。
瞭解相關原理,接下來只要逐一建立需要的 SVG 元素,並且完成配置,並設定正確的屬性值,即可動態透過程式描繪 SVG 圖形。

<body>
    <div id="svgarea">
    </div>
    <script>
            var ns = "http://www.w3.org/2000/svg";
            // svg 
            var svg = document.createElementNS(ns, "svg");
            svg.setAttributeNS(null,"width",600);
            svg.setAttributeNS(null,"height",250);
            svg.setAttribute("style","background-color:#ecf0fc");
           
            // circle
            var circle = document.createElementNS(ns, "circle");
            circle.setAttributeNS(null,"cx",300);
            circle.setAttributeNS(null,"cy",125);
            circle.setAttributeNS(null,"r",100);
            circle.setAttributeNS(null,"fill","#4169e1");

            // 加入至svg,配置於網頁呈現
            svg.appendChild(circle);
            document.getElementById("svgarea").appendChild(svg);         
    </script>
</body>

首先定義建立 svg 元素需要的命名空間名稱字串。

接下來第一段程式碼,建立 svg 元素,並且逐一設定其相關的屬性,包含 width 與 height 等等。

第二段程式碼則建立 circle 元素與對應的屬性。

最後透過 svg 引用 append 將 circle 加入至 svg 中,然後將 svg 加入畫面上預先配置好的 div 。



其中可以看到由程式建立的 svg 與 circle 元素,已經配置在網頁上。
Svg 元素除了要注意命名空間之外,與一般的 html 元素並無差異,除了將對應的標籤以程式動態配置,亦可以在輸出之後,以程式動態改變其內容。
例如我們可以任意執行這一行程式碼:

circle.setAttributeNS(null,"r",50);

這會將 circle 重新輸出為半徑 50 的圓。
接下來回到一開始示範的動態 SVG 內容,以下是其中的 HTML 配置:

<svg id="svg" style="background-color:#ecf0fc;" width="600" height="250">
</svg>
<div style="padding:0.5em;">
    <button id="subr" style="font-size:1em;"> 縮小半徑 </button>
</div>

為了減少程式碼的撰寫,直接配置了svg元素,並配置 input 標籤以提供按鈕功能。接下來是 JavaScript 程式碼:

<script>
    var r = 100;
    var ns = "http://www.w3.org/2000/svg";
    var circle = document.createElementNS(ns, "circle");
    circle.setAttributeNS(null, "cx", 300);
    circle.setAttributeNS(null, "cy", 125);
    circle.setAttributeNS(null, "r", r);
    circle.setAttributeNS(null, "fill", "#a0b4f0");
    circle.setAttributeNS(null, "stroke", "#4169e1");
    circle.setAttributeNS(null, "stroke-width", 12);

    document.getElementById("svg").appendChild(circle);
    document.getElementById("subr").onclick = function () {
        circle.setAttributeNS(null, "r", r -= 10);
    }
</script>

這段程式碼的內容大致上於前述的討論中已完成說明,最後於按鈕的 click 事件中,執行重設 circle 半徑的程式碼,將原來的半徑減 10 ,如此一來當使用者按下按鈕,可以呈現動態縮減圓形半徑的效果。




沒有留言: