中文XML论坛--svg简单动画的四种方法

1.SVG and SMIL

<?xml version="1.0" encoding="ISO-8859-1" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
    "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink">
    <rect y="45" width="10" height="10" fill="red">
        <animate attributeName="x" from="0" to="90" dur="10s"
                 repeatCount="indefinite"/>
    </rect>
</svg>

实例演示：http://www.kevlindev.com/tutorials/basics/animation/svg_smil/horizontal.svg

2.javascript and the DOM (using SMIL elements)

<?xml version="1.0" encoding="ISO-8859-1" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
    "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd" [
    <!ATTLIST svg
              xmlns:a3 CDATA #IMPLIED
              a3:scriptImplementation CDATA #IMPLIED>
    <!ATTLIST script
              a3:scriptImplementation CDATA #IMPLIED>
]>
<svg onload="makeShape(evt)"
     xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     xmlns:a3="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/"
     a3:scriptImplementation="Adobe">
    <script type="text/ecmascript" a3:scriptImplementation="Adobe"><![CDATA[
        var svgns = "http://www.w3.org/2000/svg";
        function makeShape(evt) {
            var rect, animateX;
            if ( window.svgDocument == null )
                svgDocument = evt.target.ownerDocument;

            rect = svgDocument.createElementNS(svgns, "rect");
            rect.setAttributeNS(null, "y", "45");
            rect.setAttributeNS(null, "width", "10");
            rect.setAttributeNS(null, "height", "10");
            rect.setAttributeNS(null, "fill", "green");

            animateX = svgDocument.createElementNS(svgns, "animate");
            animateX.setAttributeNS(null, "attributeName", "x");
            animateX.setAttributeNS(null, "from", "0");
            animateX.setAttributeNS(null, "to", "90");
            animateX.setAttributeNS(null, "dur", "10s");
            animateX.setAttributeNS(null, "repeatCount", "indefinite");

            rect.appendChild(animateX);
            svgDocument.documentElement.appendChild(rect);
        }
    ]]></script>
</svg>

实例演示：http://www.kevlindev.com/tutorials/basics/animation/js_dom_smil/horizontal_js_smil.svg

3.javascript and the DOM (integer - does not match SMIL)

<?xml version="1.0" encoding="ISO-8859-1" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
    "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd" [
    <!ATTLIST svg
              xmlns:a3 CDATA #IMPLIED
              a3:scriptImplementation CDATA #IMPLIED>
    <!ATTLIST script
              a3:scriptImplementation CDATA #IMPLIED>
]>
<svg onload="animate(evt)"
     xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     xmlns:a3="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/"
     a3:scriptImplementation="Adobe">
    <script type="text/ecmascript" a3:scriptImplementation="Adobe"><![CDATA[
        var rect;
        var x = 0;
        var speed = 60;
        function animate(evt) {
            if ( window.svgDocument == null )
                svgDocument = evt.target.ownerDocument;
            rect = svgDocument.getElementById("rect");
            setTimeout("advance()", speed);
        }
        function advance() {
            if ( ++x > 90 ) x  = 0;
            rect.setAttributeNS(null, "x", x);
            setTimeout("advance()", speed);
        }
    ]]></script>
    <rect id="rect" y="45" width="10" height="10" fill="red"/>
</svg>

实例演示：http://www.kevlindev.com/tutorials/basics/animation/js_dom/horizontal_js.svg

4.javascript and the DOM (parametric - matches SMIL)

<?xml version="1.0" encoding="ISO-8859-1" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
    "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd" [
    <!ATTLIST svg
              xmlns:a3 CDATA #IMPLIED
              a3:scriptImplementation CDATA #IMPLIED>
    <!ATTLIST script
              a3:scriptImplementation CDATA #IMPLIED>
]>
<svg onload="animate(evt)"
     xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     xmlns:a3="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/"
     a3:scriptImplementation="Adobe">
    <script type="text/ecmascript" a3:scriptImplementation="Adobe"><![CDATA[
        var svgRoot;
        var rect;

        var from  = 0;
        var to    = 90;
        var diff  = to - from;
        var dur   = 10 * 1000; // in milliseconds
        var speed = 33;
        function animate(evt) {
            if ( window.svgDocument == null )
                svgDocument = evt.target.ownerDocument;

            rect    = svgDocument.getElementById("rect");
            svgRoot = svgDocument.documentElement;

            advance();
        }
        function advance() {
            var elapsed = svgRoot.getCurrentTime() * 1000;
            var percent = elapsed % dur / dur;
            var x       = from + percent * diff;

            rect.setAttributeNS(null, "x", x);
            setTimeout("advance()", speed);
        }
    ]]></script>
    <rect id="rect" y="45" width="10" height="10" fill="red"/>
</svg>

实例演示：http://www.kevlindev.com/tutorials/basics/animation/js_parametric_dom/horizontal_js.svg


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