svg in firefox

[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.

 

[RobG]

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.

Please manually wrap code at about 70 characters for posting so others
can just cut and paste without auto-wrapping introducing errors.
Also, complete code that shows the issue is good, so I've added a bit
of HTML around the code:

<div id="inlineMapLegendPopup"></div>
<script type="text/javascript">

var legendArr = [];
var svgPaint = document.getElementById("inlineMapLegendPopup");
var rColor = [ 'blue', 'red', '#4CC417' ];
var str = "<font color='Red'><u><b><h4>VML SVG Test</h4>" +
"</u></font>Color 1";
var j = 10;
var doc = [];

svgPaint.innerHTML = "";

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.

The above draws 3 rectangles for me in Firefox 3.0.3.