Getting layers to work with SVG

Show and Tell
3

I like buttons & sliders, but they are kind of a pain in SVG. However if embedding the SVG inside HTML is OK, then those controls are easy.

One ultimate use case is adding an improved version of the javascript to Graphviz’s SVG generator gvrender_core_svg.c as an option or default whenever the input included layers.

Here is the javascript (blush) - just add it to the SVG output just before the last line:

<script type="text/javascript" >
<![CDATA[ 
                                               	
  var forward=1;
   var backward=-1;
   var intervalMilliseconds=0;       					
   var timer;       					
   var currId=-1; 
   var oldId;      					
   var layer = new Array();   

   window.addEventListener("load", function() {
     //alert("loaded");
     initialize();
     showHelp();
   });

  document.onkeydown = function(e) {
    switch (e.keyCode) {
        case 37:
            direction=backward;
            break;
        case 38:
            intervalMilliseconds-=1000;
            changeSpeed();
            break;
        case 39:
            direction=forward;
            break;
        case 40:
            intervalMilliseconds+=1000;
            changeSpeed();
            break;
        default:
            showHelp();
            break;
    }
  };

   function showHelp(){
     //alert('up arrow:  \tfaster\ndown arrow:\tslower\nleft arrow:\tbackward\nright arrow:\tforward');
     alert('left arrow:\tbackward\nright arrow:\tforward\nup arrow:  \tfaster\ndown arrow:\tslower');
   }

   function initialize(){                            	
     // copy the "live" nodelist into a real array 
     var layerList = document.getElementsByClassName('layer');
     for (var i =0;i<layerList.length;i++){
       layer.push(layerList[i]);
     }
     // make all layers invisible, except the 1st
     for (var i=1;i<layer.length;i++){ 	                        
       target=layer[i]; 
       target.setAttribute("display", "none");
     }                                                      

     currId=0;
     intervalSeconds=4;
     direction=forward;
     intervalMilliseconds=intervalSeconds*1000;        
     timer=setInterval("show()",intervalMilliseconds);     
   }                                                      
      	                                                        
   function changeSpeed(){
     clearInterval(timer);
     timer=setInterval("show()",intervalMilliseconds);     
   }
   function show(){
 
     oldId=currId;                                                      
     if (direction==forward){	                                        
       if (currId==layer.length - 1) {                           
         //currId=0; 
         clearInterval(timer);
         return;                                          
       }else{                                                     
         currId++;                                              
       }
     } else if (direction==backward){                                 
       if (currId==0){                                           
         //currId=layer.length - 1;                              
         clearInterval(timer);
         return;                                          
       }else{                                           
         currId--;                                              
       }
     }
     // make previous layer invisible
     if (oldId>=0){ 	                                        
       target=layer[oldId];	       
       target.setAttribute("display", "none");          
     }
     // make this layer visible                             
     target=layer[currId];    		
     target.setAttribute("display", "inline");    		
   }	                     
  
  ]]>
</script>