使用矩阵动画渐变(Animating gradientTransform with matrices)
我试图将一个由更多svg对象组成的形状变形为另一个。 我正在使用animate函数为所有需要变形的元素执行此操作。 一切都很顺利,直到我注意到灰色的阴影实际上是白色的,我发现问题出在gradientTransform中。 我对一个对象使用一个gradientTransform(矩阵(a,b,c,d,e,f))而另一个对象使用另一个。 我在文档中读到了gradientTransform能够动画,所以为什么这不起作用? 这是否意味着当动画gradientTransform不接受矩阵作为值时? 或者还有另一种方法吗?
这里只是动画的一部分,可以复制问题。 你可以清楚地看到,假设有2个阴影形状,头部左上角有一个浅灰色(这个很好),另一个白色(也应该是浅灰色)位于头部右下方。
https://jsfiddle.net/yut5yoty/2/
我尝试用这样的形状做这样的事情:
<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>
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>
原文:https://stackoverflow.com/questions/32454366