W
webmaniac
Hi, I am creating a legend for my webpage.
I am using svg to draw rectangles. But somehow it just draws one
rectangle only.
Here is the code.
var rColor=new Array();
var legendArr=[];
var svgPaint = document.getElementById("inlineMapLegendPopup");
document.getElementById("inlineMapLegendPopup").innerHTML ="";
rColor = [ 'blue', 'red', '#4CC417' ];
var str = "<font color='Red'><u><b><h4>VML SVG Test</h4></u></font>"
str = str + 'Color 1'
var j=10;
var doc=[];
for(var a=0;a<3;a++)
{
doc[a] = new DOMParser().parseFromString('<svg xmlns="http://
www.w3.org/2000/svg"><rect x="' + j + '" y="'+ j + '" width="30"
height="20" style="fill:'+ rColor[a] + ';stroke-width:1;
stroke:rgb(1,1,0)"/></svg>', 'application/xml');
legendArr[a] =
svgPaint.ownerDocument.importNode(doc[a].documentElement,true);
j=j+10;
svgPaint.appendChild(legendArr[a]);
}
I dont know, why for loop is not working?
It's just drawing one rectangle only, instead of three.
I am using svg to draw rectangles. But somehow it just draws one
rectangle only.
Here is the code.
var rColor=new Array();
var legendArr=[];
var svgPaint = document.getElementById("inlineMapLegendPopup");
document.getElementById("inlineMapLegendPopup").innerHTML ="";
rColor = [ 'blue', 'red', '#4CC417' ];
var str = "<font color='Red'><u><b><h4>VML SVG Test</h4></u></font>"
str = str + 'Color 1'
var j=10;
var doc=[];
for(var a=0;a<3;a++)
{
doc[a] = new DOMParser().parseFromString('<svg xmlns="http://
www.w3.org/2000/svg"><rect x="' + j + '" y="'+ j + '" width="30"
height="20" style="fill:'+ rColor[a] + ';stroke-width:1;
stroke:rgb(1,1,0)"/></svg>', 'application/xml');
legendArr[a] =
svgPaint.ownerDocument.importNode(doc[a].documentElement,true);
j=j+10;
svgPaint.appendChild(legendArr[a]);
}
I dont know, why for loop is not working?
It's just drawing one rectangle only, instead of three.