svg additive = "sum" 作用

svg additive = "sum" 作用 这个东西挺复杂 

 

<svg width="640" height="480" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" pointer-events="none">
  
<rect x="110" y="110" width="20" height="30" style="fill:#ff9;stroke:black">
 <animateTransform
 attributeType="XML"
 attributeName="transform" type="scale"
 from="1" to="4 2"
 dur ="3s"
 begin = "0s" fill="freeze"
 ></animateTransform>
 <animateTransform
 attributeType="XML"
 attributeName="transform" type="rotate"
 from="0" to="90"
 dur ="3s"
 begin = "3s" fill="freeze"
                   
 ></animateTransform>
</rect>
  


</svg>
</body>
</html>

默认是replace 就是初始化不继承上一次动画的结果 等于替换上一次动画 上一次动画效果会取消    

 

现在说下2个 animate additive="sum"  这个又是另外种情况了

 

默认情况下additive="replace"，也就是from/to/by设置的值都是绝对值。而当设置additive="sum"后，from/to/by设置的值就是相对于动画开始前对象的值。个人认为设置绝对值相对更加清晰，目前较少设置该属性。  这个是相对于同一个属性。不同属性还是叠加的

 animateTransform 和 animate 都是叠加的效果