Display: Sort:
Updated Code: Better Performance (5.00 / 1) (#3)
by integragreg on Sat Feb 24th, 2007 at 17:05:06 BST
(User Info)
Having implemented the two very helpful suggestions from the responses to my post, here is an updated version of the code.  Tor is correct, of course, in his suggestion for Firefox.  Memory consumption is greatly reduced in the new version, although the animation is still a bit choppy. Perhaps frame-based animation would be a better approach for me to take?
----------
<?xml version="1.0" encoding="utf-8"?>
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="1200"
height="1200"
id="TurbineMapScratchPad"
version="1.0"
onload="InitMe(evt);"
>
<script type="text/ecmascript" >
    <![CDATA[

    var svgDocument = null;
    var svgRoot = null;
    var bladeRotation=0;
    var svgns = "http://www.w3.org/2000/svg";
    var xlinkns = "http://www.w3.org/1999/xlink";
    var svgUserAgent = null;

    function InitMe(evt)
    {
        svgUserAgent = navigator.appName;

        if ( svgDocument === null )
         {svgDocument = evt.target.ownerDocument;}   

        svgRoot = svgDocument.documentElement;
        for(var y=10; y<600; y+=70)
        {
            for(var x=20; x<720; x+=40)
            {
                var index = x*y;
                var gTurbine         = svgDocument.createElementNS(svgns,"g");
                var gBlades = svgDocument.createElementNS(svgns,"g")
                var gBase = svgDocument.createElementNS(svgns,"g");
                var bladesUse    = svgDocument.createElementNS(svgns,"use");
                var baseUse = svgDocument.createElementNS(svgns,"use");
                var transNode = svgDocument.getElementById('animTrans');

                gTurbine.setAttributeNS(null,'id','turbine');
                gTurbine.setAttributeNS(null,'transform','translate(' + x + ',' + y + ') scale(4.0)');
                gBlades.setAttributeNS(null,'id','blades');

                gBase.setAttributeNS(null,'id','base');

                bladesUse.setAttributeNS(xlinkns,'href','#bladePath');
                bladesUse.setAttributeNS(null,'id','bladeUse');
                baseUse.setAttributeNS(xlinkns,'href','#basePath');

                gBase.appendChild(baseUse);
                gBlades.appendChild(bladesUse);
                if(svgUserAgent != "Netscape" && null != transNode)
                {                   
                    var newTrans = transNode.cloneNode(true);
                    gBlades.appendChild(newTrans);
                }
                gTurbine.appendChild(gBase);
                gTurbine.appendChild(gBlades);                
                svgRoot.appendChild(gTurbine);
            }
        }
        if(svgUserAgent == "Netscape") //Mozilla Firefox       
        {
            setInterval('animateBladesFF()',10);           
        }

    }

    function animateBladesFF()
    {
        root = document.getElementById("TurbineMapScratchPad");
        id = root.suspendRedraw(1000);
        var hubX=7.1;
        var hubY=6.6;

        var animList = svgDocument.getElementsByTagName("use");
        for(var i=0; i<animList.length; i++)
        {
            var node = animList.item(i);
            if(node.id=='bladeUse')
            {
                bladeRotation = bladeRotation + 2;
                if(bladeRotation > 360)
                {
                    bladeRotation=0;
                }
                node.setAttributeNS(null,'transform','rotate(' + bladeRotation + ',' + hubX + ',' + hubY + ')');
            }
        }
        root.unsuspendRedraw(id);
    }

    //]]>
</script>
<defs>
            <animateTransform id="animTrans" attributeName="transform"
                type="rotate" from="0,7.1,6.6" to="360,7.1,6.6" begin="0s" dur="3.0s"
                repeatCount="indefinite"
            />
            <g id="turbineBlades">
                <circle id="bladeHub" cx="7.1" cy="6.6" r="0.5" style="fill:black"/>
                <path id="bladePath"
                    d="
                    M 6.7203394,6.9568743
                    C 5.5101085,10.802047 5.5101085,10.802047 5.5101085,10.802047
                    L 5.1509285,12.769531
                    L 5.1509285,12.769531
                    L 7.2122104,7.0466693
                    M 7.5184653,6.8204787
                    C 11.453598,5.945983 11.453598,5.945983 11.453598,5.945983
                    L 13.337079,5.2733
                    L 13.337079,5.2733
                    L 7.3502946,6.3496084
                    M 7.0542563,6.2458097
                    C 4.3293545,3.2751324 4.3293545,3.2751324 4.3293545,3.2751324
                    L 2.8050536,1.9803314
                    L 2.8050536,1.9803314
                    L 6.7305561,6.626885"
                />

            </g>
            <g id="turbineBase">
                <path id="basePath"
                    d="
                    M 6.8684577,7.1257859
                    C 6.8684577,11.288829 6.8684577,11.288829 6.8684577,11.288829
                    L 7.3010127,11.288829
                    L 7.3010127,7.1257859
                    L 6.8684577,7.1257859
                    L 6.8684577,7.1257859
                    M 6.5893374,11.295157
                    C 6.5893374,18.210662 6.5893374,18.210662 6.5893374,18.210662
                    L 7.5738901,18.210662
                    L 7.5738901,11.295157
                    L 6.5893374,11.295157
                    L 6.5893374,11.295157"
                  />
            </g>

</defs>
</svg>    

Display: Sort:
Login

Make a new account

Username:
Password: