Question

我试图将一个由更多svg对象组成的形状变形为另一个。我正在使用animate函数为所有需要变形的元素执行此操作。一切都很顺利，直到我注意到假设为灰色的阴影实际上是白色的，我发现问题出在gradientTransform中。我对一个对象使用一个gradientTransform（矩阵（a，b，c，d，e，f））而另一个对象使用另一个。我在文档中读到了gradientTransform能够动画，所以为什么这不起作用？这是否意味着当动画gradientTransform不接受矩阵作为值时？或者还有另一种方法吗？

这是一个小提琴，只有部分动画可以复制问题。你可以清楚地看到，假设有2个阴影形状，头部左上角有一个浅灰色（这个很好），另一个白色（也应该是浅灰色）位于头部右下方。 / p>

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>

Answer 1

解决了我的问题。对于将来可能需要这个的人来说，就是程序。

如果您正在使用Illustrator或任何其他可以导出到SVG的类似程序，您可能会遇到一个问题，即您使用任何类型转换的某些对象会以矩阵的形式导出。现在，正如Robert Longson所提到的并且很好地给出了文档的链接，你不能为一般的矩阵形式制作动画。所以解决这个问题的方法就是转换矩阵，这样你就可以得到简单的转换形式，比如翻译，旋转......等等。

这可以通过Robert Longson提供的链接轻松完成（非常感谢）：http://www.maths-informatique-jeux.com/blog/frederic/?post/2013/12/01/Decomposition-of-2D-transform-matrices

在此处输入矩阵表单可为您提供所需的SVG转换。

现在要为对象设置动画，您需要为每个转换编写动画。在我的情况下，我想将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)"。首先我通过工具将其转换为：translate(211.893, 712.1) rotate(-109.79798511853208) scale(0.48390215953227567,1.1363360736630976) skewX(-0.010384435241476773) 另一个进入translate(1178.56, 1778.1) rotate(-158.44482388147645) scale(0.4839450898604097,1.1362801101228523) skewX(-0.004332604207170241)

然后我开始分别对每一个进行转换，如下：

 <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"/>

您可能还注意到我使用了additive="sum"，这是因为我需要同时完成所有转换。这解决了我的问题，我得到了这个结果。而不是我发布到问题的那个。

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

动画渐变使用矩阵变换

1 个答案: