内联 SVG 动画：兼容性问题

Question

我已经为此工作了一段时间，但似乎还没有找到合适的解决方案。

页面是带有内联 SVG 的 XHTML，一旦 SVG 完成加载，就会使用 ECMAscript 进行动画处理。有 0.5 秒的停顿，然后中间的一只眼睛睁开了。它适用于 MacOS X 上的 Safari、Firefox 和 Chrome。

问题是在 Windows 上的 Chrome 中动画无法启动，而在 Opera（在 OS X 上）中动画行为不规律。

这是怎么回事？！

您可以在this page 现场观看。我很想听听你的想法。

以下是最相关的代码：

<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

启动方法似乎在 Opera 中被调用了两次，我已经为此提交了错误报告 (CORE-31399)。一种解决方法可能是只使用一个内联 svg 片段，或者在启动函数中有一个条件，这样您就不会让两个计时器运行（我相信这是奇怪渲染行为的原因）。

Answer 2

Chrome 的问题不在于动画，而在于您的剪辑路径。当您在没有动画和最终眼孔路径的情况下测试图像时，您只会在 Chrome 中看到黑色。不知何故，这个洞不是从黑匣子中切出来的。

编辑：似乎 Chrome 无法呈现 evenodd 剪辑规则（您可以在这里测试：http://srufaculty.sru.edu/david.dailey/cs427/StateOfArt-Dailey.html#clipPath）