Question

我一直在研究这个实验website splash。该页面完全由SVG构成，并使用多个过滤器和渐变。 JavaScript允许云和天空实时改变颜色，从白天到日落，从夜晚到太阳升起。云（填充渐变的滤波失真椭圆）在屏幕上缓慢移动，当它们离开屏幕时被删除，并随机添加到屏幕的右侧。有两层云，clouds1和clouds2，一个在徽标前面，另一个在它后面，给页面一些深度。

不幸的是，Safari和Opera都无法呈现云。调试输出（上角段落元素）显示clouds1和clouds2都没有任何云。

首次加载脚本时，此行会在屏幕上添加一些云：

for(i=0;i<Math.random()*8+2;i++) addCloud(Math.random()*120);

它调用的函数addCloud()在这里给出：

function addCloud(x) // Places a cloud of a random size and height, positioned x% from the left
{
  var h=Math.round(Math.random()*80+20);
  var t="<ellipse cx=\""+Math.round(x)+"%\" cy=\""+(100-h)+"%\" rx=\""+(h/5)+"%\" ry=\""+(h/20)+"%\" fill=\"url(#billow)\" filter=\"url(#cloud)\" h=\""+h+"\"/>";
  if(Math.floor(Math.random()*2)==1) clouds1.innerHTML += t
  else clouds2.innerHTML += t;
}

addCloud()生成的最终标记应如下所示：

<ellipse cx="100%" cy="42%" rx="11.6%" ry="2.9%" fill="url(#billow)" filter="url(#cloud)" h="58"/>

可能导致云无法添加的原因是什么？

Safari / Opera中的幻影未显示错误

0 个答案: