SVG animateTransform 同时旋转和缩放同一个对象？

Posted 2023-05-08

【中文标题】SVG animateTransform 同时旋转和缩放同一个对象？

【英文标题】：SVG animateTransform rotate and scale the same object at the same time?

【发布时间】：2015-03-05 22:18:19

【问题描述】：

我想同时动画缩放和旋转一个对象..到目前为止我的尝试失败了。我只能链接动画（旋转，然后缩放），但不能一起旋转和缩放。

我错过了什么？

我已尝试删除“additive="sum"，但这只是覆盖并忽略了缩放动画...

---

<!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"
   viewBox="0 0 200 200" enable-background="new 0 0 200 200" xml:space="preserve">

<rect x="29.2" y="33.6"  >

<animateTransform attributeName="transform" type="scale" 
from="0" to="1" dur="1s" additive="sum" accumulate="sum"/> 

<animateTransform attributeName="transform" type="rotate" 
from="0 100 100" to="100 100 100" dur="5s"  repeatCount="indefinite"  accumulate="sum" />


<animate attributeType="CSS" attributeName="opacity" 
from="1" to="0" dur="4s" fill="freeze"  />


</rect>
</svg>

感谢所有帮助！

【参考方案1】：

您只需要在两个动画元素上添加“sum”即可。有了这一改变，它在 Firefox 上对我来说效果很好。

<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"
   viewBox="0 0 200 200" enable-background="new 0 0 200 200" xml:space="preserve">

<rect x="29.2" y="33.6"  >

<animateTransform attributeName="transform" type="scale" 
from="0" to="1" dur="1s" additive="sum" accumulate="sum"/> 

<animateTransform attributeName="transform" type="rotate" 
from="0 100 100" to="100 100 100" dur="5s"  repeatCount="indefinite"  additive="sum" accumulate="sum" />


<animate attributeType="CSS" attributeName="opacity" 
from="1" to="0" dur="4s" fill="freeze"  />


</rect>
</svg>