Question

我在SVG边界区域下面保留一些文本（单击以重新运行），直到动画结束。然后我使用animateTransform将文本移动到屏幕中间。当用户单击时，我使用另一个animateTransform将文本移回屏幕下方，直到动画结束。下面是两个animateTransforms。请注意，clickAniHide的开始值和结束值均为0,0，但这会正确地将文本移出屏幕！如果我删除此animateTransform，则文本不会移动。文本对象位于defs标记中，并由标记引用。文本对象不在任何可以移动它的容器中。

为简单起见，我只发布相关的animateTransforms，但如果需要，我会发布更多/所有代码。谢谢！

   <animateTransform 
    id="clickAniShow"
    xlink:href="#rerun"
    attributeType="XML"
    attributeName="transform"
    type="translate"
    calcmode="discrete" 
    dur="0.1s"
    begin="boxani2.end+0.75s;"
    keyTimes="0; 1"
    values="0, 0; 0, -350;"
    fill="freeze" 
    />

   <animateTransform 
    id="clickAniHide"
    xlink:href="#rerun"
    attributeType="XML"
    attributeName="transform"
    type="translate"
    calcmode="discrete" 
    dur="0.1s"
    begin="restarter.click+0.2s;"
    keyTimes="0; 1"
    values="0,0; 0,0;"
    fill="freeze" 
    />

Answer 1

默认情况下，动画中的值会替换该属性以前的任何值。

对于您的第一个动画，在0时设置transform(0,0)，在0.1秒时设置transform(0,-350)并根据fill="freeze"规则保留在那里。
对于第二个动画，在0时设置transform(0,0)，在0.1秒时再次设置transform(0,0)。请记住，在那个动画之前，但是在第一个动画之后它是transform(0,-350)。

您可以设置另外两个rules：

additive="sum"：如果您的文本元素在任何动画开始之前都有transform="scale(...)"属性，则动画不会替换该值，而是翻译已经缩放的元素。
accumulate="sum"：如果一个元素有多个动画，则一个动画从前一个动画的结束状态开始，就像你预期的那样。

顺便说一句，它应该是calcMode，而不是calcmode。

对于SMIL动画支持，Edge和Internet Explorer根本不支持SMIL动画。从IE 10开始，您可以使用CSS animations代替。我无法立即发现你为什么遇到Firefox问题。

尽管起始值和结束值相同，animateTransform仍会移动对象

1 个答案: