0

i am trying to morph one shape that consists out of more svg objects into another. I am using animate function to do so for all the elements that need morphing. Everything was going fine until i noticed the shade that is suppose to be gray-ish is actually white, and i found out that the problem is in the gradientTransform. I use one gradientTransform(matrix(a,b,c,d,e,f)) for one object and the other for another. I read in the documentation that gradientTransform is capable of animation, so why doesnt this work? Does this mean that when animating gradientTransform doesnt accept matrices as values? Or is there another way of doing so?

Here is a fiddle with only part of the animation that replicates the problem. You can clearly see that there are suppose to be 2 shade shapes, one grayish on the top left part of the head(this one is fine), and the other white (should also be grayish) on the bottom right of the head.

https://jsfiddle.net/yut5yoty/2/

I tried doing something like this with the shape:

<animate attributeName="gradientTransform" values="matrix(-0.1639 -0.4553 1.0692 -0.3848 211.8933 712.0995);matrix(-0.4501 -0.1778 0.4175 -1.0568 1178.5645 1778.1045);matrix(-0.1639 -0.4553 1.0692 -0.3848 211.8933 712.0995)" dur="5s" repeatCount="indefinite"></animate>
Ivan Horvatin
  • 217
  • 1
  • 2
  • 14
  • You can't animate a general matrix transform. You can only animate some specific types of matrix transforms like scaling, translating, skewing etc. http://www.w3.org/TR/SVG/animate.html#AnimateTransformElement – Robert Longson Sep 08 '15 at 09:53
  • Is it possible to transform the matrix into basic transformations? Or is it impossible without knowing the exact way it was transformed? Or any kind of workaround i could do to make it to animate, or at least at the end of the animation force the gradient to transform like that? – Ivan Horvatin Sep 08 '15 at 09:59
  • http://stackoverflow.com/questions/5107134/find-the-rotation-and-skew-of-a-matrix-transformation or http://www.maths-informatique-jeux.com/blog/frederic/?post/2013/12/01/Decomposition-of-2D-transform-matrices – Robert Longson Sep 08 '15 at 10:01
  • Thank you, i will look into it! – Ivan Horvatin Sep 08 '15 at 10:03

1 Answers1

0

Solved my problem. For any people that might need this in the future here is the procedure.

If you are working in illustrator, or any other similar program that can export to SVG, you might get a problem that some of the objects you used any kind of transformations get exported in form of matrices. Now, as Robert Longson mentioned and nicely gave a link to the documentation you cant animate a general matrix form. So the workaround this problem is converting the matrix so you can get simple forms of transformations like translation, rotation..and so on.

This can be done easly with the link Robert Longson provided (thanks a lot for that): http://www.maths-informatique-jeux.com/blog/frederic/?post/2013/12/01/Decomposition-of-2D-transform-matrices

Inputing the matrix form here gives you all the transformations for SVG you need.

Now to animate the object, you need to write an animation for every single transformation. In my case i wanted to change matrix(-0.1639 -0.4553 1.0692 -0.3848 211.8933 712.0995 into matrix(-0.4501 -0.1778 0.4175 -1.0568 1178.5645 1778.1045)". First i converted it via the tool into: translate(211.893, 712.1) rotate(-109.79798511853208) scale(0.48390215953227567,1.1363360736630976) skewX(-0.010384435241476773) and the other into translate(1178.56, 1778.1) rotate(-158.44482388147645) scale(0.4839450898604097,1.1362801101228523) skewX(-0.004332604207170241)

Then i proceeded to use transformation on each one seperatly, like so:

 <animateTransform attributeName="gradientTransform" attributeType="XML" type="translate" values="211.893, 712.1;1178.56, 1778.1;211.893, 712.1" repeatCount="indefinite" dur="5s" />
    <animateTransform attributeName="gradientTransform" attributeType="XML" type="rotate" values="-109.79798511853208;-158.44482388147645;-109.79798511853208" repeatCount="indefinite" dur="5s" additive="sum"/>
    <animateTransform attributeName="gradientTransform" attributeType="XML" type="scale" values="0.48390215953227567,1.1363360736630976;0.4839450898604097,1.1362801101228523;0.48390215953227567,1.1363360736630976" repeatCount="indefinite" dur="5s" additive="sum"/>
    <animateTransform attributeName="gradientTransform" attributeType="XML" type="skewX" values="-0.010384435241476773;-0.004332604207170241;-0.010384435241476773" repeatCount="indefinite" dur="5s" additive="sum"/>

You may also notice i used additive="sum" , and that is because i need all the transformation to be done at the same time. This solved my problem and i got this outcome. As opposed to the one i posted in to the question.

https://jsfiddle.net/yut5yoty/4/

Ivan Horvatin
  • 217
  • 1
  • 2
  • 14