svg animateTransform 同时触发多个动画答案

【问题标题】：svg animateTransform trigger multiple animations simultaneouslysvg animateTransform 同时触发多个动画
【发布时间】：2014-07-07 08:46:32
【问题描述】：

在以下示例中，我需要同时执行所有动画。但只适用于最后一个。

<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();

【问题讨论】：

将属性 animate="sum" 添加到所有 animateTransforms。我把它作为答案，但是一些耗电的监视器删除了它。

标签： svg svg-animate

【解决方案1】：

您的脚本中几乎没有错误：

begin="不确定"

应该是：

repeatCount="无限期"

在 rotation 值中，您忘记用分号分隔最后一个值，并且在 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 animation tutorial

【讨论】：