Я работаю над этим уже некоторое время, но пока не могу найти адекватного решения.
Страница XHTML со встроенным SVG, который анимируется с помощью ECMAscript после завершения загрузки SVG. Пауза 0,5 с, затем открывается глаз посередине. Он работает в Safari, Firefox и Chrome в MacOS X.
Проблема в том, что в Chrome на Windows анимация не запускается, а в Opera (на OS X) анимация ведет себя хаотично.
Что происходит?!
Вы можете увидеть его в прямом эфире на этой странице . Я хотел бы услышать ваши мысли.
Вот наиболее важные биты кода:
<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>