一.动画

1.animateTransform与animate不同的地方

animate 可以自动动画叠加而animateTransform需要加入additive="sum"才能实现动画叠加

例如

let _animateTransform=document.createElementNS(SVG_NS,'animateTransform'); //创建动画

_animateTransform.setAttribute('attributeName','transform');//指定动画属性名称

_animateTransform.setAttribute('attributeType','XML');//指定动画属性类型

_animateTransform.setAttribute('additive','sum');// 关键指定动画效果是否叠加默认是 replace 替换

animateBig.setAttribute('type','scale');// transform 的属性可以是transition rotate scale skew

animateBig.setAttribute('dur', dur);//设置持续事件

animateBig.setAttribute('from',scale); //是指初始属性

animateBig.setAttribute('to',scale*4);//设置目标属性

animateBig.setAttribute('id','big'+this.state.startCount); //指定id

animateBig.setAttribute('begin','0;small.end');//指定什么事件开始 0 表示加载后立即开始，small.end small 为另外一个动画的id 指该动画结束后再开始可制作循环动画
animateBig.setAttribute('repeatCount','indefinite'); //自带的动画循环属性可设置 1-indefinite

2.transform属性

1.transform="scale(1,-1)" 表示x轴不变，y轴反转成-1

3.animateMotion(js操作animateMotion)

var circle=document.createElementNS("http://www.w3.org/2000/svg","circle");//创建运动的圆

circle.setAttributeNS(null,"cx",0);

circle.setAttributeNS(null,"cy",0);

circle.setAttributeNS(null,"r",4);

circle.setAttributeNS(null,"fill",'#9be482');

var animateMotion=document.createElementNS("http://www.w3.org/2000/svg","animateMotion");//创建动画

animateMotion.setAttributeNS(null,"dur",'6s');

animateMotion.setAttributeNS(null,"repeatCount",'indefinite');

animateMotion.setAttributeNS(null,'path',path);//设置动画path路径或者选用下方 xlink:href指定对应的path路径

// var mPathObj = document.createElementNS("http://www.w3.org/2000/svg","mpath");

// mPathObj.setAttribute("xlink:href",'#path');

// animateMotion.appendChild(mPathObj);

circle.appendChild(animateMotion);