svg - XML SVG-保留动画的结束状态

Question

AnimateTransform 操作结束后，该元素将恢复为原始值。
这并不是完全意外，因为它在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动画保留更改的方法

这是SVG中的一个例子

<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" Action ，该 Action 由 begin="one.end"的第一个动画的结尾触发，但似乎不太正确。我还没有找到任何文档说明如何调用 set获取转换后的值。

<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>

这个关于 persisting the end state of the animation的问题说明了如何通过使用 -webkit-animation-fill-mode: forwards;使用CSS转换来做到这一点，但这显然不会对svg动画产生任何影响

Answer 1

fill="freeze"将保留动画状态，例如

<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>