XML SVG - 保持动画的结束状态答案

【问题标题】：XML SVG - persist the end state of an animationXML SVG - 保持动画的结束状态
【发布时间】：2015-02-19 21:21:35
【问题描述】：

AnimateTransform 操作结束后，元素会恢复为原始值。
这并不完全出乎意料，因为它在SMIL documentation：

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

但这是不受欢迎的。我想找到一种使用 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>

我的一个想法是使用dur="indefinite" 调用set 动作，该动作由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 动画产生任何影响

【问题讨论】：

标签： svg svg-animate

【解决方案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>

【讨论】：