animateTransformSum2.svg

Enable keyboard shortcuts

<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">

  <rect x="0" y="0" width="200" height="200" fill="green" />

  <rect

    x="0"

    y="0"

    width="100"

    height="100"

    fill="red"

    <animateTransform attributeName="transform" type="translate" from="0 0" to="50 0" dur="200ms" additive="sum" fill="freeze" />

    <animateTransform attributeName="transform" type="translate" from="0 0" to="50 0" dur="300ms" additive="sum" fill="freeze" />

    </rect>

</svg>