SVG animateTransform触发多个动画同时进行。

Question

在下面的例子中，我希望所有动画都同时执行。但是只有最后一个起作用。

<g>
    <animateTransform attributeName="transform" attributeType="XML"
    type="rotate" values="2 100 100; -1 100 100; 1 100 100; -0.5 100 100 0.5 100 100" begin="indefinite" dur="0.35s" fill="freeze" />

    <animateTransform attributeName="transform" attributeType="XML"
                      type="scale" values="1; 1.2; 1" begin="indefinite" dur="0.35s" fill="freeze" />

    <animateTransform attributeName="transform" attributeType="XML"
                      type="translate" values="0 0; -100 -100; 0; 0" begin="indefinite" dur="0.35s" fill="freeze" />

    <image x="0" y="0" width="200" height="200"  xlink:href="<?php  echo $cck->getValue('project_icon'); ?>" />
</g>

JS触发了操作：

var animations = $( $this ).find( 'animateTransform' );
animations[0].beginElement();
animations[1].beginElement();
animations[2].beginElement();

- Sergey Onishchenko

---

将属性animate="sum"添加到所有的animateTransform中。我把这个作为答案，但一些权力满满的监管者删除了它。 - john k

Answer 1

你的脚本中有一些错误：

begin="indefinite"

应该改为：

repeatCount="indefinite"

在rotation值中，你忘记用分号分隔最后一个value，而在translate部分则多了一个分号。

如果需要执行多个转换，请通过相加来累加结果（第一个转换无需添加）：

additive="sum"

因此，你的代码应该像这样：

<g>
   <animateTransform attributeName="transform" attributeType="XML"
       type="rotate" values="2 100 100;-1 100 100;1 100 100;-0.5 100 100;0.5 100 100" repeatCount="indefinite" dur="0.35s" fill="freeze" />

   <animateTransform attributeName="transform" attributeType="XML"
                      type="scale" values="1;1.2;1" repeatCount="indefinite" dur="0.35s" fill="freeze" additive="sum"/>

   <animateTransform attributeName="transform" attributeType="XML"
                      type="translate" values="0 0;-100 -100;0 0" repeatCount="indefinite" dur="0.35s" fill="freeze" additive="sum"/>

   <image x="0" y="0" width="200" height="200"  xlink:href="<?php  echo $cck->getValue('project_icon'); ?>" />
</g>

顺便提一下，将您的图像旋转0.5度是不可察觉的，所以为什么要费心呢？！

在这里您可以阅读更多相关内容： SVG-SMIL动画教程

- CodeGems