dynashow-demo

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);
}

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>