Hello community! I hope you're able to help me this time...

So, the point is that I wanted to make animated svg for my website. At this moment I need only something what would be changing its color. I tried many things I found in internet but I couldn't do it alone. Transforming simple circles (generated in notepad) is not a trouble but I wanted to transform full svg file generated from Inkscape.

Here's an example file I wish to transform:


Can anyone tell me how to animate this svg's color to some another? Please, post some ready code. I want to analize it myself.

Regards,
None

First I should say that I won't be able to give you any code, because I don't know how. But wouldn't you animate a whole image in the same way that you animate one object? Wouldn't you just write the code to animate all the objects? In your example, all the objects use the same gradient, so I would think that would make it easier for a simple color rotation, than if each object had a different color or gradient (or than if you need objects "in motion").

I see that you have all the objects grouped. And a group is technically an object. Wouldn't you just put the group object in place of the circle object in your example?

brynn wrote:First I should say that I won't be able to give you any code, because I don't know how. But wouldn't you animate a whole image in the same way that you animate one object? Wouldn't you just write the code to animate all the objects? In your example, all the objects use the same gradient, so I would think that would make it easier for a simple color rotation, than if each object had a different color or gradient (or than if you need objects "in motion").

I see that you have all the objects grouped. And a group is technically an object. Wouldn't you just put the group object in place of the circle object in your example?

Yesterday, I succefully animated svg thanks to help on this website: http://wiki.inkscape.org/wiki/index.php/SVG_Animation But I still have no idea how to animate color. I tried to change variables in the code that is one that website but it didn't work. You should remember that color of my example is defined like here:

So it's not managed alone. It probably makes some troubles.

Btw. I saw that examples with animating colors on W3C are failing, too: http://www.w3schools.com/svg/tryit.asp?filename=trysvg_animatecolor And it's not really cool.

Maybe it will work if I try animate color of a normal filled object instead of gradiental. But if it doesn't work on W3C website, it probably won't work anywhere. Something is broken. I hope it will be solved without making a new standard. Anyway, I'll try to troll W3C ass to rush them to work...

Hi Nonemoticoner,

Off the top of my head I think you could achieve the animation of colour, if by that you mean moving from one to another over time, by using the <animate> tag that you would place inside of the group of things you want the colour of to animate. I have done it with opacity to achieve a kind of blinking effect, but colour is just another attribute (fill) and should work the same I would have thought...

<g
id="groupobject"
...
<animate
attributeName="fill"
values="0;1"
keyTimes="0;1"
dur="18"
begin="0"
repeatCount="indefinite"
id="animatecolour" />
<path
id="pathobject"
... />
</g>

This animation cycles over 18s indefinitely. It's possible to skew the progress using ratios in the values and keyTimes attributes. Check out the spec for details as I can't quite remember ottomh how that works.

Hope that helps.

Thanks for repling, cluesome.

You say you achived it? Could you post here the whole text with your code included? Or attach the html file (that would be even better idea). I just can't configure it myself.

I worked mine out from reading this and a fair bit of trial and error: http://www.w3.org/TR/SVG/animate.html#AnimateElement

I had a quick go at animating fill but I couldn't get it to work either :p

Good luck.

Hello Nonemoticoner,

As all your colors are individually set per object and taken from the <defs>, you cannot just animate the grouped object. The inheritance goes like <parent> --> <child> only if the child doesn't have a setting yet. As all you children have relations to defined colors in the <defs> you'll have to animate every individual color.

If you use SMIL, please consider that it won't work in MSIE

This is an example for a radialGradient, that you can find on http://srufaculty.sru.edu/david.dailey/ ... ent11c.svg

<radialGradient id="gradient1" cx="60%" cy="60%" r="10%" fx="50%" fy="34%"
spreadMethod="reflect" gradientUnits="userSpaceOnUse">
<animate attributeName="cx" dur="7s" values="10%; 70%; 10%"
repeatCount="indefinite"/>
<animate attributeName="r" dur="9s" values="30%; 5%;0%; 5%;30%"
repeatCount="indefinite"/>
<animate attributeName="fy" dur="3s" values="5%; 75%; 5%"
repeatCount="indefinite"/>
<stop offset="0.0" stop-color="grey"/>
<stop id="OF" offset="0.5" stop-color="white">
</stop>
<stop offset="1" stop-color="black"/>
</radialGradient>


To create one that works on all browser use this example that uses Javascript for the animation.

http://srufaculty.sru.edu/david.dailey/svg/GradRot.svg


On the site of David Dailey you can find tonnes of examples and a universe of fascinating ideas how to use animated SVG

http://srufaculty.sru.edu/david.dailey/svg/

At www.learnsvg.com, you can find a free book on SVG from 2003, that can also teach you how to create animations. However as it was written before browser vendors decided to have SVG add the XML NameSpace declarations to SVG documents these are always missing and need to be added in the <SVG> header. Just use the same header as Inkscape and you'll be fine