Inline SVG Animation: Compatibility Oddities

Question

I've been working on this for some time, but can't seem to find an adequate solution yet.

The page is XHTML with inline SVG which is animated with ECMAscript once the SVG is finished loading. There is a 0.5s pause, then an eye in the middle opens. It works on Safari, Firefox, and Chrome on MacOS X.

The problem is in Chrome on Windows the animation doesn't start, and in Opera (on OS X) the animation behaves erratically.

What is going on?!

You can see it live at this page. I'd love to hear your thoughts.

Here are the most relevant bits of code:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"
   viewBox="0 0 1200 800"
   preserveAspectRatio="xMidYMid"
   style="width:100%; height:100%; position:absolute; top:0; left:0; z-index:2;"
   onload="startup(evt);"> 
  <script> 
    function startup(evt){
      setTimeout("doEyeOpen(1200,20);",500);
    }
    function doEyeOpen(dur,msrate) {
      eye=document.getElementById("eyehole");
      var totStep = dur/msrate, step=0;
      window.timer = window.setInterval(
        function() {
          var start=580, d1=start-175.087, d2=624.913-start;
          var prog = easeOut(step,totStep);
          var y2=start-(d1*prog);
          var y1=start+(d2*prog);
          var d="M 1200, 800 H 0 V 0 h 1200 V 800 z M 1183.589 400 C 1037.727 400 813.41 "+y1+" 600 "+y1+" C 386.591 "+y1+" 162.274 400 16.412 400 C 162.274  400 386.591 "+y2+" 600 "+y2+" C 813.41 "+y2+" 1037.727 400 1183.589 400 z";
          eye.setAttribute("d", d);
          step++;
          if (step > totStep) {window.clearInterval(window.timer); return}
        } 
      ,msrate)
    }
    function easeOut(step,totStep){
      return (1 - Math.pow(((step/totStep)-1),8));
    }
  </script> 
  <rect fill="#FFF" x="10" y="10" width="1180" height="780" id="white-bg"/> 
  <g id="Iris"> 
    <circle transform="translate(600, 400)" r="260" fill="#e50000" id="c-iris" onclick="changeColor(evt)" /> 
    <circle transform="translate(600, 400)" r="130" fill="#000" id="c-pupil"/> 
  </g> 
  <g id="Gray"> 
    <path fill="#999999" d="M138.363,397.25c0-90.911,26.295-175.674,71.671-247.127H78.419
          c-35.555,74.909-55.457,158.691-55.457,247.124c0,90.606,20.891,176.329,58.105,252.629h132.529
          C166.042,577.29,138.363,490.509,138.363,397.25z"/> 
    <path fill="#999999" d="M1121.58,150.124H989.963c45.377,71.453,71.671,156.216,71.671,247.127
          c0,93.258-27.68,180.039-75.233,252.626h132.53c37.215-76.3,58.107-162.023,58.107-252.629
          C1177.039,308.815,1157.137,225.033,1121.58,150.124z"/> 
  </g> 
  <clipPath id="CP"
            clip-rule="evenodd"> 
    <path id="eyehole"
          d="M 1200, 800 H 0 V 0 h 1200 V 800 z
          M 1183.589 400 C 1037.727 400 813.41 400.000 600 400.000 C 386.591 400.000 162.274 400 16.412 400
          C 162.274  400 386.591 400.000 600 400.000 C 813.41 400.000 1037.727 400 1183.589 400 z"/> 
  </clipPath> 
  <rect fill="#000" x="0" y="0" width="1200" height="800" id="black-cover" clip-path="url(#CP)"/> 
</svg>

Answer 1

The problem in Chrome is not the animation but your clipping path. When you test your image without animation and the final eyehole path, you only see black in Chrome. Somehow the hole isn't cut out of the black box.

EDIT: Seems like Chrome can't render the evenodd clip-rule (you can test here: http://srufaculty.sru.edu/david.dailey/cs427/StateOfArt-Dailey.html#clipPath)

Answer 2

The startup method gets called twice in opera it seems, I've filed a bugreport (CORE-31399) on this. A workaround could be to use only one inline svg fragment, or to have a condition in the startup function such that you don't get two timers going (which is I believe the cause of the odd rendering behaviour).