09
2017
05

js调用createElementNS创建SVG动画animate,smil

svg-animate1.html


svg-animate2.html


svg-js动画.html



        window.onload = function() {

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

            svg.setAttribute('xmlns:xlink', 'http://www.w3.org/1999/xlink');

            svg.setAttribute('version', '1.1');

            svg.setAttribute('width', '800px');

            svg.setAttribute('height', '400px');

            document.body.appendChild(svg);

            

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

            rect.setAttribute("id", "myrect"); 

            rect.setAttribute("fill","red");

            rect.setAttribute("stroke","black");

            rect.setAttribute("stroke-width","5");

            rect.setAttribute("x", "100");

            rect.setAttribute("y", "100");

            rect.setAttribute("width", "100");

            rect.setAttribute("height", "50");

            svg.appendChild(rect);

            

            var anim = document.createElementNS('http://www.w3.org/2000/svg','animate');

            anim.setAttribute("attributeName", "width");

            anim.setAttribute("from", "100");

            anim.setAttribute("to", "400");

            anim.setAttribute("dur", "10s");

            anim.setAttribute("begin", "0s");

            anim.setAttribute("fill", "freeze");

            rect.appendChild(anim);

            

            anim.beginElement();

        }



« 上一篇下一篇 »

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。