內聯SVG動畫：兼容性奇怪

我一直在這個工作了一段時間，但似乎無法找到一個合適的解決方案。內聯SVG動畫：兼容性奇怪

該頁面是帶有內聯SVG的XHTML，一旦SVG加載完成，該內聯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>

來源

2010-07-14 thure

在Chrome的問題是不是動畫，但你的剪輯路徑。當您在沒有動畫和最終眼孔路徑的情況下測試圖像時，只會在Chrome中看到黑色。不知何故，這個洞不是從黑匣子裏切出來的。

編輯：好像Chrome瀏覽器無法呈現EVENODD夾規則（你可以在這裏進行測試：http://srufaculty.sru.edu/david.dailey/cs427/StateOfArt-Dailey.html#clipPath）

來源

2010-07-15 07:40:53

到目前爲止，我還沒有能夠使用evenodd剪輯規則的眼罩。我會繼續嘗試其他選擇 - 謝謝讓我知道這不是動畫沒有開始！這是一個巨大的緩解。 – thure 2010-07-16 05:24:14

啓動方法獲取歌劇似乎叫了兩聲，我已經提交了錯誤報告（CORE- 31399）。一個解決方法可能是隻使用一個內聯svg片段，或者在啓動函數中有一個條件，這樣你不會得到兩個定時器（這是我相信奇怪渲染行爲的原因）。

來源

2010-07-15 08:51:55

我已將啓動動畫的代碼更改爲我在此處找到的函數：http://simonwillison.net/2004/May/26/addLoadEvent/ Opera仍似乎有問題。感謝您提交錯誤報告！ – thure 2010-07-16 05:23:36

內聯SVG動畫：兼容性奇怪

回答

相關問題