动态创建SVG元素

当SVG图形较复杂时，一行行地写xml会让人崩溃的。如果先在javascript中map变量设置一些属性，再动态生成就容易得多了。不过只对有大量重复形状时才会减少工作量。

这里简单演示生成"Label"的过程，参考了如下页面：
http://starkravingfinkle.org/projects/demo/svg-bubblemenu-in-html.xml

dynashow.svg

<?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文件的方法<script type="text/javascript" xlink:href="dynashow.js"> </script>, 需要使用xlink:href属性。该文件中的js代码，labs定义了一个代表3个sharp相关数据的列表，init()将会使用该列表来生成相关svg元素。

dynashow.js

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的主体了，我们可以根据实际需要来定义一些形状并进行参数化，还可以更进一步定义自己的图形库了。

评论

1 楼 尼古拉斯阿俊 2016-03-22