我正在尝试使用
jquery动态添加DOM元素时执行SVG元素的动画.如果我在< body>中添加这些元素如下所示.工作样本为此
http://jsfiddle.net/bZdfH/2/
http://jsfiddle.net/bZdfH/2/
<svg> <script type="text/ecmascript" xlink:href="http://leunen.me/fakesmile/smil.user.js"/> <circle cx="60" cy="60" r="20" style="fill: pink; stroke: red;" > <animate attributeName="r" dur="4s" values="20; 0; 20" repeatCount="indefinite"/> </circle> </svg>
当我动态添加它时,动画将不会在IE中启动,但它适用于Chrome和FireFox.这就是我所拥有的.
<svg> <script type="text/ecmascript" xlink:href="http://leunen.me/fakesmile/smil.user.js"/> <circle cx="60" cy="60" r="20" style="fill: pink; stroke: red;" onmouSEOver="changeImage(this)" > </circle> </svg> <script> function changeImage(circle) { while (circle.firstChild) { circle.removeChild(circle.firstChild); } circle.setAttributeNS(null,"fill","blue"); var animate = document.createElementNS("http://www.w3.org/2000/svg","animate"); animate.setAttributeNS(null,"attributeName","r"); animate.setAttributeNS(null,"values","20;0;20"); animate.setAttributeNS(null,"dur","6s"); animate.setAttributeNS(null,"repeatCount","indefinite"); circle.appendChild(animate); } </script>
这是jsfiddle的工作样本.任何人都可以帮助我?