clearInterval - Problem

[emerson]

To all,

I posted this question in svg group twice already - and got no answer.

Q: why does the animation not stop when a height of 10 is reached ?




<?xml version="1.0"?>
<svg width="1280" height="800">
<script type="text/javascript">

<![CDATA[

var height = 0;
var timer1;

function startAction()
{
timer1 = setInterval("doIpl()",500 )
}

function doIpl()
{
obj = svgDocument.getElementById( "rect11" );
obj.setAttribute("height", height);
height = height + 1

if ( height == 10 )
{
stop();
}

}

function stop()
{
clearInterval(timer1);
alert(height);
}




]]>
</script>

<g>

<rect id="rect12" x="190" y="55" width="100" height="65"
fill="lightgrey"
stroke-width="1" stroke="black" />
<text x="200" y="70" font-size="12">SAG_BCPII</text>

<rect id="rect11" x="190" y="55" width="100" height="65" fill="pink"
stroke-width="1" stroke="black" />
<text x="200" y="70" font-size="12">SAG_BCPII</text>


<!--*******************************************************************
-->


<rect onclick="startAction()" x="100" y="450" width="10" height="10"
fill="pink" stroke-width="1" stroke="black" />
<text x="110" y="475" text-anchor="middle">Start</text>

<rect onclick="stop()" x="65" y="450" width="10" height="10"
fill="pink" stroke-width="1" stroke="black" />
<text x="65" y="475" text-anchor="middle">Stop</text>





</g>
</svg>