Tweening SVG color

[ecsancho]

Greetings I'm trying to change the color of an SVG but it appears this functionality is not supported or I'm doing something wrong. here's what I've tried

 

arrow is the name of my svg, and tweening width/height works but not color changing

 

TweenMax.to(arrow, 2, {fill:"#ff0000"});

TweenMax.to(arrow, 2, {color:"#ff0000"});

TweenMax.to(arrow, 2, {css:{fill:"#ff0000"}});

 

Can anyone please point me in the right direction? Thanks

[jamiejefferson]

Are you targeting the whole SVG or an element inside? Are you using DOM properties or the style property? It's best to create a demo so we can see your specific issue and solve it promptly.

 

The following seems to be working fine however.

<svg width="200" height="200">
  <rect width="200" height="200" fill="rgb(0,0,255)" id="rect" />
</svg>

TweenLite.to("rect", 5, { fill: "rgb(255,0,255)" });

You might want to read this post as well - one of our members worked on converting the Raphael plugin to work with native SVG, which could be useful for you.

[Carl]

Here you can see the fill of an svg being animated multiple times:

http://codepen.io/GreenSock/pen/gpDrC

 

Here is a super simplified version with a single tween

http://codepen.io/GreenSock/pen/tBodF/

 

Tough to know what is happening with your code without seeing it running.

 

Feel free to make a simple demo: http://forums.greensock.com/topic/9002-read-this-first-how-to-create-a-codepen-demo/

[ecsancho]

I'm not near my computer at the moment I'll investigate tomorrow morning. I'm using Adobe edge and imported the svg to the stage and was targetting it with getSymbol(), so I'm not sure if I was targeting the shape inside. But thanks for the quick replies fellas. Much appreciation.

[ecsancho]

Okay I still can't get this to work in adobe edge.

 

Here's the codeden source that I'm basically using in edge

See the Pen yvjCl by anon (@anon) on CodePen

 

This works in code pen. In edge I'm importing the svg to the stage and name it "arrow"

 

This works in edge. And the width tweens fine. But I'm looking for is to modify the fill color of the shape inside the arrow

 

var arrow =  sym.$("arrow")

TweenMax.to(arrow, 2, { width:100});

 

This does not work

 

var testme = sym.$("#testme");

TweenMax.to(testme, 2, { fill:"red"});

 

nor

var testme = sym.$("arrow").find("polygon")

TweenMax.to(testme, 2, { fill:"red"})

 

nor

var testme = sym.$("arrow").find("#testme")

TweenMax.to(testme, 2, { fill:"red"})

 

What gives? Any idea folks? Thanks in advance

[grit]

seeing you work with Adobe I suspect you're using adobe generated .svg files. They can contain an extra 'g transform=matrix' group with a crosslink to the path data which results in not updating the color fill animation. Try and remove the xlink group from the svg so you have just the group definitiion with the paths.

[Jonathan]

Hello, ecsancho, and welcome to the GreenSock Forum!

 

Have you tried applying the color tween to your svg <g> group tag with id #XMLID_1_ ?

 

Normally with SVG and the <g> tag .. you can just apply your fill or other attributes for your graphical elements directly on the parent group tag:

 

<circle>, <ellipse>, <image>, <line>, <path>, <polygon>, <polyline>, <rect>, <text>, <use>

 

Example animating a <g> tag that has its children inherit its animated values:

 

See the Pen wKaVdy by jonathan (@jonathan) on CodePen

 

Taken from the MDN reference for the <g> tag:

 

The g element is a container used to group objects. Transformations applied to the g element are performed on all of its child elements. Attributes applied are inherited by child elements.

 

So if your children of the <g> tag are having the same attributes changed, in your case the <polygon> tags fill color attribute. You can just animate the fill on the <g> tag that has the id #XMLID_1_

 

I dont use Adobe Edge so i am not sure if it takes that into consideration. But that <g> tag attribute inheritance is part of the spec.

 

Also as a side note.. if you include your svg markup inside a html5 file with the HTML5 <doctype html>.

 

Then you don't need to include the following xml namespace attributes in your svg code:

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.4, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 width="8px" height="16px" viewBox="0 0 8 16" enable-background="new 0 0 8 16" xml:space="preserve">

you could just include a limited amount of attributes on your <svg> tag, minus the xml namespace xmlns attributes:

<svg id="Layer_1" x="0px" y="0px" width="8px" height="16px" viewBox="0 0 8 16" enable-background="new 0 0 8 16">
...
</svg>

The HTML syntax does not support namespace declarations. Basically you don't need the xmlns attributes since you are including the <svg> tag in an HTML5 file.

 

Please see the following link for more info regarding foreign elements:

 

http://www.w3.org/TR/html5/syntax.html#foreign-elements

 

I hope this helps!

[ohem]

This thread might be helpful for working with SVG/GSAP in Edge: http://greensock.com/forums/topic/11131-svg-plugin-with-edge-animate/

[davi]

Figure I should probably post this here as this is where I came as I was searching for an answer to an issue related to this and took me a while to figure out the issue. I was using inline SVG from Flash CC and tweening a fill color wasn't working. Searched everywhere and couldn't find an answer.

If you're using inline SVG code from Flash CC exported SVG's and am wondering why tweening a SVG CSS value isn't working, then you'd need to do some slight modifications to the SVG code it spits out. If you're using Illustrator SVG code (via copy and paste from AI to Sublime for instance), then you don't have to worry about this because AI does this correctly.

Flash will probably give you two additional lines of code for 'g transform matrix'. However, it puts those two lines after the path info. What you need to do is nest that path code inside those two 'g transform matrix' lines. Then everything works as expected, otherwise you'll get an error regarding a null target when using GSAP.

The original Flash CC SVG code will probably look like this:
<path etc etc />
<g transform="matrix...etc etc etc example1></g>
<g transform="matrix...etc etc etc example2></g>

The modified Flash CC SVG code should look like this:

<g transform="matrix...etc etc etc example1>
<g transform="matrix...etc etc etc example2>
<path etc etc />
</g>
</g>

 

[Jonathan]

Hello Davi, Thanks for sharing!

 

Flash can export out some dopey SVG code.

 

But you might be interested to try the Flash2SVG Flash extension and it is Free with lots of export options.

 

It basically allows you to export out your Flash animation as an Animated SVG. You can just disregard the SVG animateTransform tags since that uses SMIL animation which as of now has real crappy performance in Firefox, not supported in IE, and with Chrome being the only one to support only some of the spec.

• What you can do is export your Flash animation as an Animated SVG file. Which is just a SVG file with the <animateTransform> tags for the animation.
• Just delete the <animateTransform> tags, since you wont need them.
• then your ready to bring the SVG code into an HTML page to animate with GSAP

It produces clean SVG code from Flash. Your SVG code will be better formatted and exported through the Flash2SVG extension. Especially if inside Flash you organize and name your movie clips or symbols, which helps on how your SVG code will be exported.

 

Download and install manually here:

 

https://github.com/TomByrne/Flash2Svg/releases

 

Or the method i used was to log into your Adobe CC account and install from the extension through their.

 

Keep in mind that Adobe CC is still very buggy with installing extensions due to their Adobe Creative Cloud Desktop Manager being full of bugs. So I found its best to search for the Flash2SVG extension when your logged in your Adobe account and then the Adobe Creative Cloud Desktop Manager will download and install it automatically if signed in.