SVG 矢量绘制常见问题

一.动画 

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);

对应生成类似如下dom结构(注意不会生成一模一样，只是两种书写形式)