By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
455,627 Members | 1,682 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 455,627 IT Pros & Developers. It's quick & easy.

svg in firefox

P: n/a
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").in nerHTML ="";
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.
Nov 4 '08 #1
Share this Question
Share on Google+
1 Reply


P: n/a
On Nov 5, 6:55*am, webmaniac <sunnyluth...@gmail.comwrote:
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]);
}
</script>

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.
--
Rob
Nov 5 '08 #2

This discussion thread is closed

Replies have been disabled for this discussion.