Question

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

我的一个想法是使用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>

persisting the end state of the animation上的这个问题显示了如何使用-webkit-animation-fill-mode: forwards;进行css变换，但这显然不会对svg动画产生任何影响

Answer 1

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

＆＃13;

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

＆＃13;

XML SVG - 持久化动画的结束状态

以下是SVG中的示例

1 个答案: