SVG矩阵multiplication.How等价于两个不相等的矩阵

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>                                                                                 

由于matrices.In文件1的乘法，这两个文件具有不同的动画，所以我们有T*S*(-T)*R，而在文件2中，我们有R*T*S*(-T)。

我的要求是使文件2的行为像文件1 .So，我将不得不在不能触摸父 .So的动画的情况下对文件2矩阵乘法进行一些更改，在子节点上应用什么更改?我不能在子 node.So之外进行更改，我必须做的是在子节点内进行更改。

帮我摆脱这一切。

我想给出更明显的问题。

<?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"/>

 I don't want to change N3's animation.

Answer 1

你有(2)并且希望它表现得像(1)。从(2)我们可以读取R，但不能重写它。从(2)可以生成语义等价于(1)的(3)。

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

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

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

由于R与其逆相乘给出了恒等矩阵，我们可以用以下方式重写(2)，从而给出(3)：

R

• calculate

• 在T

• Append *R

之前读取R => *R^(-1)的逆

您从未提到过javascript，因此我包含了两种解决方案，它们要么通过手工重写脚本，要么通过javascript解决。

这里的完整解决方案：http://jsfiddle.net/59Kjx/