XML SVG — сохранить конечное состояние анимации

После завершения действия 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


svg svg-animate
person KyleMit    schedule 21.12.2014    source источник

Ответы (1)


arrow_upward
14
arrow_downward

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>

person Robert Longson    schedule 21.12.2014