How to change the Colour in SVG ?

[strooky]

Dear Friends.

I have an XML Program on SVG.Here is my program :

<?xml version="1.0" standalone="no"?>
<svg xmlns="

http://www.w3.org/2000/svg">

<text y="40" style="font-size:24pt">
Using animation
</text>
<rect x="200" y="100" width="200" height="100" fill="blue">
<animate attributeType="CSS" attributeName="opacity"
from="1" to="0" dur="10s"/>
begin="0s" dur="10s" fill="freeze" from="200" to="100" />
<animate attributeName="y" attributeType="XML"
begin="0s" dur="10s" fill="freeze" from="100" to="50" />
<animate attributeName="width" attributeType="XML"
begin="0s" dur="10s" fill="freeze" from="200" to="400" />
<animate attributeName="height" attributeType="XML"
begin="0s" dur="10s" fill="freeze" from="100" to="50" />
</rect>
</svg>

In the above program,i can animate the Rectangle,the Rectangle size will become smaller and smaller and the colour will keep fading and after sometime,the animation will come to halt and the colour will come back to Original Colour.

My question is i am not able to change the colour at the end,i donot want the original colour (the Blue Colour) at the end,i want some other colour and another question is i want to keep some other colour when it is keep fading.

Your answers will be appreciated,it will be a great help for me and i hope this can help you guys also in learning somethings.


Regards

Strooky

 

[tsuji]

[1] The starting and finishing colors could be set simply using these alternative formats and then you have more control on color.
[tt]
<rect x="200" y="100" width="200" height="100" fill="blue">
<!-- or [2]
<rect x="200" y="100" width="200" height="100" fill="yellow">
-->
<!-- or [3]
<rect x="200" y="100" width="200" height="100" fill="#eeffdd">
-->
[/tt]
[2] The changing color look is simply due to your animating opacity. You can comment the line out and then the color will be kept unchanged during the animation.
[tt]
<!-- comment out
<animate attributeType="CSS" attributeName="opacity"
from="1" to="0" dur="10s"/>
-->
[/tt]

 

[tsuji]

Upon re-reading, if the ending color is of concerned, let's say we want it to end at yellow whereas we don't want color animation, and that the color be chosen to blue during the animation, it can be done via this twist by adding and assigning a color to the animation tag for fill.
[tt]
[green]<!-- change the fill to the final color -->[/green]
<rect x="200" y="100" width="200" height="100" fill="[blue]yellow[/blue]">
<animate attributeType="CSS" attributeName="opacity"
from="1" to="0" dur="10s"/>
[blue]<!-- adding this line -->
<animate attributeType="CSS" attributeName="fill"
begin="0s" dur="10s" from="blue" to="blue" />[/blue]
<!-- [green]this line was broken[/green] -->
<animate attributeName="x" attributeType="XML"
begin="0s" dur="10s" fill="freeze" from="200" to="100" />
<animate attributeName="y" attributeType="XML"
begin="0s" dur="10s" fill="freeze" from="100" to="50" />
<animate attributeName="width" attributeType="XML"
begin="0s" dur="10s" fill="freeze" from="200" to="400" />
<animate attributeName="height" attributeType="XML"
begin="0s" dur="10s" fill="freeze" from="100" to="50" />
</rect>
[/tt]