Hola a todos,
mis pocos conocimientos de este mundillo son casi todos autodidactas. El caso es que os dejo aquí un problema que me da un código que he hecho para que un cuadro de color verde cambie a rojo constantemente (al abrir el navegador).

Creo que será una duda muy sencilla para los que sepáis, pero yo no acabo de entender qué es lo que está mal y agradecería que alguien me lo dijera

Como os digo, el cuadro sí que cambia de verde a rojo al cargar la página (onload en JavaScript) pero no sé por qué cuando la carga es un verde claro, pero después, todos los restantes cambios rojo-verde-rojo el verde no es del mismo tono que el inicial, sino que es un verde más oscuro... ¿Dónde está el problema???

El script JavaScript es éste:

function trabaja(){
tempoColor();}

	 function tempoColor(){
		 setInterval("cambiColor2()",1000);}

function cambiColor2(){

var miRectangulo=document.getElementById("rect2985");

if(miRectangulo.style.fill=="red"){
	miRectangulo.style.fill="green";}

	
	
	 else{
		 
		 miRectangulo.style.fill="red";

}

Por lo demás, el cuadrado lo he dibujado con Inkscape; el código generado por Inkscape lo inserto en el código HTML de la página, así:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Temporizando en JavaScript</title>
</head>

<defs
id="defs4" />
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="0.35"
inkscape:cx="350"
inkscape:cy="520"
inkscape:document-units="px"
inkscape:current-layer="layer1"
showgrid="false"
inkscape:window-width="1280"
inkscape:window-height="738"
inkscape:window-x="-8"
inkscape:window-y="-8"
inkscape:window-maximized="1" />
<metadata
id="metadata7">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:label="Capa 1"
inkscape:groupmode="layer"
id="layer1">
<rect
style="fill:#22ef2e;fill-rule:evenodd;stroke:#d36d00;stroke-width:10.8;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;fill-opacity:1;stroke-miterlimit:4;stroke-dasharray:none"
id="rect2985"
width="657.14288"
height="677.14288"
x="60"
y="140.93361"
onload="trabaja()" />
</g>
</svg>

</body>
</html>

¿Alguien podría explicarme por qué hace ese extraño cambio de tono con el tono del verde?

Gracias ¡¡¡¡