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 =＆gt;的倒数R^(-1)
在*R^(-1)

T

附加*R

你从未提及javascript，所以我提供了两个解决方案，通过手动重写脚本或javascript来解决这个问题。

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

SVG矩阵乘法。如何将两个不相等的事物等同起来

1 个答案: