SVG Matrix умножение. Как приравнять две неравные матрицы

Question

У меня есть два файла SVG.
Файл 1:

  <g>                                                                                 
    <animateTransform attributeName="transform" additive="sum" begin="0"  fill="freeze" keyTimes="0;1" type="translate" values="315 220;315 220"/>
    <animateTransform attributeName="transform"  additive="sum" begin="0"  fill="freeze" dur="5" keyTimes="0;1" type="scale" values="1,1;1,5"/>
    <animateTransform attributeName="transform"  additive="sum" begin="0"  fill="freeze" keyTimes="0;1" type="translate" values="-315 -220;-315 -220"/>
    <animateTransform attributeName="transform"  additive="sum" begin="0"  fill="freeze" keyTimes="0;1" type="rotate" values="45 315 220;0 300 200"/>
    <rect x="300" y="200" width="30" height="40" fill="blue" />             
  </g>

Файл 2:

  <g id="parent">                                                                                 
    <animateTransform attributeName="transform"  additive="sum" begin="0"  fill="freeze" keyTimes="0;1" type="rotate" values="45 315 220;0 300 200"/>
    <rect id="child" x="300" y="200" width="30" height="40" fill="blue">                                                                              
       <animateTransform attributeName="transform" additive="sum" begin="0"  fill="freeze" keyTimes="0;1" type="translate" values="315 220;315 220"/>
       <animateTransform attributeName="transform"  additive="sum" begin="0"  fill="freeze" dur="5" keyTimes="0;1" type="scale" values="1,1;1,5"/>
       <animateTransform attributeName="transform"  additive="sum" begin="0"  fill="freeze" keyTimes="0;1" type="translate" values="-315 -220;-315 -220"/>               
    </rect>            
 </g>                                                                                 

Поскольку эти два файла имеют различную анимацию из-за умножения матриц.В файле 1 у нас есть T * S * (- T) * R, а в файле 2 у нас есть R * T * S * (- T).
Мое требование - заставить файл 2 вести себя как файл 1.Придется внести некоторые изменения в умножение матрицы файла 2 при условии, что Я не могу коснуться анимации родительского . Так, какие изменения я должен применить к дочернему узлу? Я не могу внести измененияза пределами дочернего узла. То, что я должен сделать, находится внутри дочернего узла.
Помогите мне выйти из этого ...

Я хочучтобы дать более очевидную проблему ..

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1 Tiny//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11-tiny.dtd">
<svg baseProfile="tiny" display="inherit" version="1.1" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:ev="http://www.w3.org/2001/xml-events">
<symbol>
    <rect x="300" y="200" width="30" height="40" fill="yellow" opacity="0.5" id="symbol_0">
        <animateTransform attributeName="transform" additive="sum" begin="0"  fill="freeze" keyTimes="0;1" type="translate" values="315 220;315 220"/>
        <animateTransform attributeName="transform"  additive="sum" begin="0"  fill="freeze" dur="5" keyTimes="0;1" type="scale" values="1,1;1,2"/>
        <animateTransform attributeName="transform"  additive="sum" begin="0"  fill="freeze" keyTimes="0;1" type="translate" values="-315 -220;-315 -220"/>
    </rect>
</symbol>
<g id="anim1">
    <animateTransform attributeName="transform" additive="sum" begin="0"  fill="freeze" keyTimes="0;1" type="translate" values="315 220;315 220"/>
    <animateTransform attributeName="transform"  additive="sum" begin="0"  fill="freeze" dur="5" keyTimes="0;1" type="scale" values="1,1;1,5"/>
    <animateTransform attributeName="transform"  additive="sum" begin="0"  fill="freeze" keyTimes="0;1" type="translate" values="-315 -220;-315 -220"/>
    <animateTransform attributeName="transform"  additive="sum" begin="0"  fill="freeze" keyTimes="0;1" type="rotate" values="45 315 220;0 300 200"/>

    <rect x="300" y="200" width="30" height="40" fill="blue" opacity="0.5" />
</g>
<g id="anim2">
    <animateTransform attributeName="transform"  additive="sum" begin="0"  fill="freeze" keyTimes="0;1" type="rotate" values="45 315 220;0 300 200"/>
    <use xlink:href="#symbol_0">
        <animateTransform attributeName="transform"  additive="sum" begin="0"  fill="freeze" keyTimes="0;1" type="rotate" values="-45 315 220;0 300 200"/>
        <animateTransform attributeName="transform" additive="sum" begin="0"  fill="freeze" keyTimes="0;1" type="translate" values="315 220;315 220"/>
        <animateTransform attributeName="transform"  additive="sum" begin="0"  fill="freeze" dur="5" keyTimes="0;1" type="scale" values="1,1;1,2.5"/>
        <animateTransform attributeName="transform"  additive="sum" begin="0"  fill="freeze" keyTimes="0;1" type="translate" values="-315 -220;-315 -220"/>
        <animateTransform attributeName="transform"  additive="sum" begin="0"  fill="freeze" keyTimes="0;1" type="rotate" values="45 315 220;0 300 200"/> 
    </use>
</g>

<use id="N3" xlink:href="#symbol_0" x="100"/>

Я не хочу менять анимацию N3.

Answer 1

У вас есть (2) и вы хотите, чтобы он вел себя как (1). Из (2) мы можем прочитать R, но НЕ переписать его. Из (2) мы можем сгенерировать (3), который семантически эквивалентен (1).

(1)  T*S*(-T)*R

(2)  R*T*S*(-T)

(3)  R*R^(-1)*T*S*(-T)*R

Поскольку умножение R на его обратное дает нам единичную матрицу, мы можем переписать (2) следующим образом, что дает нам (3):

• Чтение R
• вычислить обратное значение R => R^(-1)
• Вставить *R^(-1) до T
• Добавить *R

Вы никогда не упоминали javascript, поэтому я включил два решения, которые решают это либо вручную, переписывая скрипт, либо javascript.

Полное решение здесь: http://jsfiddle.net/59Kjx/