svg动态操作图片沿路径移动

新人学习svg,说说我在svg上遇到的坑,持续更新.

5.gif

注意以下几点
1.svg不能直接操纵dom元素
.setAttributeNS相当于dom中.setAttribute
2.使用拼接animateMotion标签的方法不能获取到beginElement

无法获取beginElement

要使用svg的方式

  document.createElementNS('http://www.w3.org/2000/svg', 'animateMotion');

事例代码

        animation = document.createElementNS('http://www.w3.org/2000/svg', 'animateMotion');
        animation.setAttributeNS(null, 'id', 'temp_'+(new Date().getTime()));
        animation.setAttributeNS(null, 'begin', '0');
        // animation.setAttributeNS(null, 'end', '');
        animation.setAttributeNS(null, 'dur', args.duration+'s');
        animation.setAttributeNS(null, 'repeatCount', '1');
        animation.setAttributeNS(null, 'path', path);
        square.append(animation);
        console.log(animation);
        console.log(typeof animation.beginElement); 
        animation.beginElement();