<animate> <animateColor>

Discuss SVG code, accessible via the XML Editor.
Forum rules
Post Reply
JimJoyce
Posts: 37
Joined: Fri Jun 19, 2009 7:06 pm

<animate> <animateColor>

Postby JimJoyce » Thu Mar 27, 2014 10:36 pm

I am trying to use <animate> or <animateColor> within a <use>. They're not working correctly.
I'm displaying three hexagons. I want one to change red-to-green, the next green-to-blue, the third blue-to-red.
They all change red-green-blue-red.

<svg width="200px" height="200px" viewBox="0 0 200 200" version="1.1"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<g id="hxg"> <polygon points="15,-26, 30,0, 15,26, -15,26, -30,0, -15,-26" /> </g>
</defs>

<use xlink:href="#hxg" x="35" y="100" style="fill: #ff0000;">
<animate xlink:href="#hxg" attributeName="fill" attributeType="CSS"
from="#ff0000" to="#00ff00" begin="0s" dur="2s" fill="freeze" />
</use>
<use xlink:href="#hxg" x="100" y="100" style="fill: #00ff00;">
<animate xlink:href="#hxg" attributeName="fill" attributeType="CSS"
from="#00ff00" to="#0000ff" begin="2s" dur="2s" fill="freeze" />
</use>
<use xlink:href="#hxg" x="165" y="100" style="fill: #0000ff;">
<animate xlink:href="#hxg" attributeName="fill" attributeType="CSS"
from="#0000ff" to="#ff0000" begin="4s" dur="2s" fill="freeze" />
</use>
</svg>


I've tried <animate> and <animateColor>,
I've tried attributeType="CSS" and ="XML"
Can anyone tell me what I'm doing incorrrectly.
Thanks, JimJ
Top
hulf2012
Posts: 716
Joined: Sat Nov 24, 2012 12:37 pm

Re: <animate> <animateColor>

Postby hulf2012 » Fri Mar 28, 2014 2:22 am

Hello:
When adding IDs to each instance of the USE element, it seems that works in the required way:

Code: Select all

<svg width="200px" height="200px" viewBox="0 0 200 200" version="1.1"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<g id="hxg"> <polygon points="15,-26, 30,0, 15,26, -15,26, -30,0, -15,-26" /> </g>
</defs>

<use xlink:href="#hxg" x="35" y="100" style="fill: #ff0000;" id="u01">

   <animate id="u01" attributeName="fill" attributeType="CSS"
   from="#ff0000" to="#00ff00" begin="0s" dur="2s" fill="freeze" />
</use>

<use xlink:href="#hxg" x="100" y="100" style="fill: #00ff00;" id= "u02"  >

    <animate  id = "u02"  attributeName="fill" attributeType="CSS"
    from="#00ff00" to="#0000ff" begin="2s" dur="2s" fill="freeze" />
</use>

<use xlink:href="#hxg" x="165" y="100" style="fill: #0000ff;" id= "u03">
   <animate id= "u03" attributeName="fill" attributeType="CSS"
   from="#0000ff" to="#ff0000" begin="4s" dur="2s" fill="freeze" />
</use>
</svg>


And It works in Chrome and the last Firefox
If you have problems:
1.- Post a sample (or samples) of your file please.
2.- Please check here:
http://tavmjong.free.fr/INKSCAPE/MANUAL/html/index.html
3.- If you manage to solve your problem, please post here your solution.
Top
JimJoyce
Posts: 37
Joined: Fri Jun 19, 2009 7:06 pm

Re: <animate> <animateColor>

Postby JimJoyce » Fri Mar 28, 2014 5:40 am

Hi, hulf2012,
Are you sure?

I've added id="hx1..." to the <animate...

I've tried four versions:
<animate attributeType="CSS"..
<animate attributeType="XML"..
<animateColor attributeType="CSS"..
<animateColor attributeType="XML"..
In five browsers, as before

The results, for me, are exactly as before:
Opera, Chrome & Safari all animate three hexagons simultaneously through Red-Green-Blue-Red.
Firefox and IE both show three hexagons, Red, Green an Blue, which remain unchanged.

My code asks
the first: from="#ff0000" to="#00ff00" begin="0s" dur="2s"
the second:from="#00ff00" to="#0000ff" begin="2s" dur="2s"
the third: from="#0000ff" to="#ff0000" begin="4s" dur="2s"
Top
JimJoyce
Posts: 37
Joined: Fri Jun 19, 2009 7:06 pm

Re: <animate> <animateColor>

Postby JimJoyce » Fri Mar 28, 2014 5:52 am

Hi, hulf2012,
APOLOGIES.
I've just pasted your code, and tested it in Opera.
It works perfectly.
(Opera is my default browser for my SVG. I find it most reliable.)

I've now got to discover how your code differs from mine.
Thanks, and sincere apologies, again,
JimJoyce
Top
JimJoyce
Posts: 37
Joined: Fri Jun 19, 2009 7:06 pm

Re: <animate> <animateColor>

Postby JimJoyce » Fri Mar 28, 2014 5:59 am

Hi, hufl2012,
I see you have added the same ID to both each <use> and the <animate>.
I added the ID only to each <animate>
I don't understand why your method works, but must admit it does work.
Thanks, again
JimJoyce
Top
hulf2012
Posts: 716
Joined: Sat Nov 24, 2012 12:37 pm

Re: <animate> <animateColor>

Postby hulf2012 » Fri Mar 28, 2014 8:05 am

Hello:
I don't know how it exactly works, either.

But my idea is that you have to diferentiate each "clon"of the USE definition, using an ID for each one. Maybe If you add a different CLASS attribute, and then point to it in the animation element, the results will be the same.

Also note that I'm using the ID in each "clon", and in each animation element. It's redundant... but it works

More or less :geek:
If you have problems:
1.- Post a sample (or samples) of your file please.
2.- Please check here:
http://tavmjong.free.fr/INKSCAPE/MANUAL/html/index.html
3.- If you manage to solve your problem, please post here your solution.
Top
JimJoyce
Posts: 37
Joined: Fri Jun 19, 2009 7:06 pm

Re: <animate> <animateColor>

Postby JimJoyce » Sat Mar 29, 2014 3:33 am

Hi Hulf,
I thought I replied earlier, but my reply appears to have gone astray.
I tale your point that adding the same 'ID' to both <use> and its child <animate>
seems redundant. But it's required. Without it, the animate fails.

I'm not sure we've mentioned that the <use> and the <animate> must BOTH have the xlink:href, again even though the <animate> is part of the <use>,
and might be presumed to be inheriting the link.

I've also tested it with attributeType="XML". That FAILS.
attributeType must be "CSS".
I suppose that's obvious. attributeName="fill". 'fill' is CSS.

I think that's enough for this week.
JimJoyce
Top
Post Reply

Return to “SVG / XML Code”