以文本方式查看主题

-  中文XML论坛 - 专业的XML技术讨论区  (http://bbs.xml.org.cn/index.asp)
--  『 SVG/GML/VRML/X3D/XAML 』  (http://bbs.xml.org.cn/list.asp?boardid=21)
----  [求助]在javascript中使用DOM操纵 animateMotion  (http://bbs.xml.org.cn/dispbbs.asp?boardid=21&rootid=&id=74759)


--  作者:yangguosdxl
--  发布时间:5/10/2009 10:27:00 PM

--  [求助]在javascript中使用DOM操纵 animateMotion
其实也就是生成一个带有animateMotion属性的动画。

会的给个小例子什么的吧.整了一天,还是出不来呀:-(

一面是小弟写的,也不知道哪里出错了:-(:

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="5cm" height="3cm"  viewBox="0 0 500 300"
     xmlns="http://www.w3.org/2000/svg" version="1.1"
     xmlns:xlink="http://www.w3.org/1999/xlink" onload="init(evt)" >

     <script type="text/ecmascript"><![CDATA[
        function init(evt) {
        try {
        cloneRect(evt)
        }
        catch(err) {
            str = "" + err.description
            alert(str)
        }
        }

        function cloneRect(evt) {
        // get a pointer to the template animations
        var template_animations = document.getElementById('defs').getElementsByTagNameNS('http://www.w3.org/2000/svg', '*');

        svgDoc = evt.target.ownerDocument;
        newRect = svgDoc.createElement("rect")
        svgRoot = svgDoc.rootElement
       
        newRect.setAttribute("x", 400)
        newRect.setAttribute("y", 230)
        newRect.setAttribute("width", 50)
        newRect.setAttribute("height", 20)
        newRect.setAttribute("style", "fill:rgb(255,0,0);stroke-width:2")
        newRect.setAttribute("onend", "animationEnd()")
        newRect.setAttribute("visibility", "visible")
       
        // clone and append the animations
        var animations = new Array();
        for (var i = 0; i < template_animations.length; i++) {
        var animation = template_animations.item(i).cloneNode(false);
        animations.push(newRect.appendChild(animation));
        }
        svgRoot.appendChild(newRect)

        //alert("newRect.appendChild(animation)")
        // launch animations
        
        for (var i = 0; i < animations.length; i++) {
            animations[i].beginElement();
        }     
           
        
        //alert("newRect.beginElement()")
        }

        function animationEnd() {
            alert("animationEnd!")
        }
  ]]></script>

  <desc>Example animMotion01 - demonstrate motion animation computations</desc>
  
  <defs id="defs">
      <animateMotion dur="3s"  rotate="auto" begin="indefinite"
         path="M400,250 L100,250" >
      </animateMotion>
  </defs>
  <rect x="1" y="1" width="498" height="298"
        fill="none" stroke="blue" stroke-width="2" />
  </svg>


W 3 C h i n a ( since 2003 ) 旗 下 站 点
苏ICP备05006046号《全国人大常委会关于维护互联网安全的决定》《计算机信息网络国际联网安全保护管理办法》
3,983.398ms