XML SVG-保留动画的结束状态 [英] XML SVG - persist the end state of an animation

问题描述

AnimateTransform 结束后操作，该元素将恢复为原始值.
这并不是完全意外的，因为它在 SMIL文档中:

After the end of an AnimateTransform action, the element snaps back to the original value.
This isn't exactly unexpected as it's in the SMIL documentation:

与所有动画元素一样，这仅会操纵表示值，并且当动画完成时，不再应用效果

As with all animation elements, this only manipulates the presentation value, and when the animation completes, the effect is no longer applied

但这是不需要的.我想找到一种使用XML动画保存更改的方法

But it is unwanted. I'd like to find a way to persist the changes using XML animations

<svg width="200" height="200" viewBox="0 0 100 100"
     xmlns="http://www.w3.org/2000/svg" 
     xmlns:xlink="http://www.w3.org/1999/xlink">
  <rect id="outline" stroke="black" fill="white" 
        width="100" height="100" >
    <animateTransform id="one"
                      attributeType="XML"
                      attributeName="transform"
                      type="translate"
                      from="0" to="-7"
                      dur="1s" repeatCount="1" />
  </rect>
</svg>

我想到的一个主意是呼叫 set 触发了 dur="indefinite" 的操作在第一个动画的结尾处添加 begin ="one.end" ，但似乎不太正确.我尚未找到任何文档来说明如何调用set以获得转换后的值.

One idea I had was to call a set action with dur="indefinite" that was triggered by the end of the first animation with begin="one.end", but can't quite seem to get the syntax right. I haven't found any documentation that show how to call set for a transformed value.

<svg width="200" height="200" viewBox="0 0 100 100"
     xmlns="http://www.w3.org/2000/svg" 
     xmlns:xlink="http://www.w3.org/1999/xlink">
  <rect id="outline" stroke="black" fill="white" 
        width="100" height="100" >
    <animateTransform id="one"
                      attributeType="XML"
                      attributeName="transform"
                      type="translate"
                      from="0" to="-7"
                      dur="1s" repeatCount="1" />
    
    <!-- Doesn't work -->
    <set attributeType="XML"
         attributeName="transform"
         type="translate"
         to="-7" begin="one.end" /> 
    
    <!-- Does work (as POC) -->
    <set attributeType="css"
         attributeName="fill"
         to="green" begin="one.end" />

  </rect>
</svg>

关于保持动画的结束状态的问题显示了如何使用-webkit-animation-fill-mode: forwards;通过css变换做到这一点，但这显然不会对svg动画产生任何影响

This question on persisting the end state of the animation shows how to do this with css transforms by using -webkit-animation-fill-mode: forwards;, but that obviously won't have any affect on an svg animation

推荐答案

fill = 冻结" 将保留动画的状态，例如

fill="freeze" will persist the state of an animation e.g.

<svg width="200" height="200" viewBox="0 0 100 100"
     xmlns="http://www.w3.org/2000/svg" 
     xmlns:xlink="http://www.w3.org/1999/xlink">
  <rect id="outline" stroke="black" fill="white" 
        width="100" height="100" >
    <animateTransform id="one"
                      attributeType="XML"
                      attributeName="transform"
                      type="translate"
                      from="0" to="-7"
                      dur="1s" repeatCount="1"
                      fill="freeze"/>
  </rect>
</svg>

这篇关于XML SVG-保留动画的结束状态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！