動態創建SVG元素

當SVG圖形較複雜時，一行行地寫xml會讓人崩潰的。如果先在javascript中map變量設置一些屬性，再動態生成就容易得多了。不過只對有大量重複形狀時纔會減少工作量。

這裏簡單演示生成"Label"的過程，參考瞭如下頁面：
[url]http://starkravingfinkle.org/projects/demo/svg-bubblemenu-in-html.xml[/url]

[b]dynashow.svg[/b]

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
       "http://www.w3.org/TR/2001/REC-SVG-20050904/DTD/svg11.dtd">
<!-- Created by amaya 11.3.1, see http://www.w3.org/Amaya/ -->
<svg xmlns="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="600"
     height="600" baseProfile="full" onload="init()">
  <title>Dynamic Create Sharp</title>
  <style type="text/css">
    g rect{stroke: blue; stroke-opacity: 1; stroke-width: 1px; fill: white;}
    g text{font-family:Verdana,Tahoma; font-weight:bold; font-size:small; fill:red; }</style>
  <script type="text/javascript" xlink:href="dynashow.js"> </script>
  <script type="text/javascript">
    <![CDATA[
    var labs = [{x: "10", y: "10", width: "100", height: "35", label: "Good Moring!"},
    {x: "30", y: "50", width: "140", height: "35", label: "Hello world!"},
    {x: "50", y: "100", width: "250", height: "35", label: "Dyanmic create SVG Element!"}];

    function init() {
        for (var i = 0; i < labs.length; i++) {
            createMySharp(labs[i]);
        }
    }

    ]]>
  </script>
</svg>

注意第12行引入外部javascript文件的方法[b]<script type="text/javascript" xlink:href="dynashow.js"> </script>[/b], 需要使用xlink:href屬性。該文件中的js代碼，labs定義了一個代表3個sharp相關數據的列表，init()將會使用該列表來生成相關svg元素。

[b]dynashow.js[/b]

var SVG_NS = "http://www.w3.org/2000/svg";
var XLINK_NS = "http://www.w3.org/1999/xlink";

var ATTR_MAP = {
    "className": "class",
    "svgHref": "href"
};

var NS_MAP = {
    "svgHref": XLINK_NS
};

function makeSVG(tag, attributes){
    var elem = document.createElementNS(SVG_NS, tag);
    for (var attribute in attributes) {
        var name = (attribute in ATTR_MAP ? ATTR_MAP[attribute] : attribute);
        var value = attributes[attribute];
        if (attribute in NS_MAP) 
            elem.setAttributeNS(NS_MAP[attribute], name, value);
        else 
            elem.setAttribute(name, value);
    }
    return elem;
}

//var lab1 = {x: "10", y: "10", width: "100", height: "35", label: "Good Moring!"};

function createMySharp(sharpData) {
	var svgdoc = document.documentElement;

	var group = makeSVG("g", {x: "0", y: "0", transform: "translate("+sharpData.x+", "+sharpData.y+")"});

	var rect = makeSVG("rect", {x: "0", y: "0", width: sharpData.width, height: sharpData.height});
	group.appendChild(rect);

	var text = makeSVG("text", {x: "0", y: "25"});
	text.textContent = sharpData.label;
	group.appendChild(text);

	svgdoc.appendChild(group);
}

makeSVG()在svg名字空間下生成相應elemnt，並設置屬性，屬性由一個map表示。ATTR_MAP是爲了避免svg屬性名和javascript中的關鍵字或命名規則相沖突，而NS_MAP是由於一些屬性如xlink:href在svg名字空間之外。

createMySharp()就在svg文件的創建element的主體了，我們可以根據實際需要來定義一些形狀並進行參數化，還可以更進一步定義自己的圖形庫了。