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

Question

AnimateTransform动作结束后，元素将恢复为原始值。
这并不是SMIL文档中所预期的：

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

但这是不需要的。我想找到一种使用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"该动作是由第一个动画的结尾用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>

这个关于保持动画结束状态的问题说明了如何通过使用来进行css转换-webkit-animation-fill-mode: forwards;，但这显然不会对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>