Running very slow when batch change elements' property

Dear all,

My SVG is as follows:
---------------------------------------------------


<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11-flat-20030114.dtd">
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" onload="init(evt)">
<script type="text/javascript"><![CDATA[

function init(evt){
var _SVGNS_ = "http://www.w3.org/2000/svg";
for(i=0;i<60;i++){
for(j=0;j<50;j++){
var group=document.createElementNS(_SVGNS_,"g");
group.setAttributeNS(null,'transform','translate('+(i*10)+'
'+(j*10+50)+')');

var circle=document.createElementNS(_SVGNS_,"circle");
circle.setAttributeNS(null,'r',2);

group.appendChild(circle);
document.documentElement.appendChild(group);
}
}
}

function show(){
//console.time('show');
var circles=document.getElementsByTagName('circle');
for(i=0,len=circles.length;i<len;i++){
circles[i].style.setProperty('display','inherit','');
}
//console.timeEnd('show');
}

function hide(){
//console.time('hide');
var circles=document.getElementsByTagName('circle');
for(i=0,len=circles.length;i<len;i++){
circles[i].style.setProperty('display','none','');
}
//console.timeEnd('hide');
}

]]></script>
<rect width="60" height="40" fill="red" onclick="show()"/>
<rect x="70" width="60" height="40" fill="blue" onclick="hide()"/>
</svg>

---------------------------------------------------

In Firefox:
When click the blue rect, hide all circles quickly. But when click the
red rect, it's very slow.

In IE and Chrome:
Both are fast.

Why slow in firefox? How to solve? Thanks in advance.

Best,
Renjun