Transform animation order

Hi!

I'm creating SVG animations and I'm facing problems with transform
animations and the underlying animation model. This might interest you as
you are developing the next version.

I want to have a rectangle that spins and after a while it also starts
moving to the right. The spinning will repeat forever and once the
rectangle is on the right edge of the viewbox, it jumps to the left and
repeats moving.

The problem is that the animateTransform elements need to be applied in
order t1, t2, t3 to apply the transforms correctly. However, the real order
is t2, t3, t1 because t1 begins later than t2 and t3. See the SVG below for
the elements.

The t0 element is there just to translate the rectangle while it is not
moving and to exclude that static part from repeating. The document does
not animate correctly because of the problem, except if you change t1 to
start at 0, but then the static period t0 is missed. Another way is to
include the static period t0 in t1 using keyTimes/values, but then the
static period is repeated, which is not desired.

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 300 150">
  <rect width="30" height="30" fill="red" transform="translate(50,30)
rotate(0) translate(-15,-15)">
    <animateTransform id="t0" begin="0" dur="1" attributeName="transform"
type="translate" keyTimes="0;1" values="50,30;50,30"/>
    <animateTransform id="t1" begin="1" dur="2" attributeName="transform"
type="translate" keyTimes="0;1" values="50,30;250,30"
repeatDur="indefinite"/>
    <animateTransform id="t2" begin="0" dur="2" attributeName="transform"
type="rotate" keyTimes="0;1" values="0;360" repeatDur="indefinite"
additive="sum"/>
    <animateTransform id="t3" begin="0" dur="2" attributeName="transform"
type="translate" keyTimes="0;1" values="-15,-15;-15,-15" fill="freeze"
additive="sum"/>
  </rect>
</svg>

The main point is that there is no way to control the transform order if
the animations don't start at the same time. The above is just one example,
there are also other examples and it happens with scaling and skewing, too.

I have tried to think how to solve this using the model that the new Web
Animation spec provides, but it seems that the only way will be the custom
effect scripting. The priority property could be used to control the order
of the custom effect scripts, or one custom effect script could animate all
transforms.

Is there any other way to keep the transform order while their begin times
differ? It is a bit messy to start writing scripts to achieve this. Or
perhaps I am missing something..?

Cheers,
Kari