chrome浏览器下后台疯狂报错，火狐下则正常。求大神指点。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>svg</title>
</head>
<body>
<svg width="1200" height="1000" version="1.1" xmlns="http://www.w3.org/2000/svg">
<defs>
<pattern id="grid" width="20" height="20" patternUnits="userSpaceOnUse">
<path d="M0,0H20V20" stroke-width="1" stroke="#f0f0f0" fill="none"/>
</pattern>
</defs>
<rect x="0" y="0" width="1200" height="1000" fill="url(#grid)" stroke="" stroke-width=""/>
<text x="100" y="150" font-size="14px" font-family="Microsoft YaHei">ABCDEFGHIJKLMNOPQRSTUVWXYZ</text>
<path d="M100,0V200M0,100H200" stroke="red" fill="none" transform=translate(0,50) ></path>
</svg>
<script type="text/javascript">
var n = 26;
var x = [];
var y = null;
var i = n;
var s = 100;
var w = 0.02;
var t = 0.2;
var sintext = document.getElementsByTagName('text')[0];
while(i--) x.push(20);
function arrange(t) {
y = [];
var ly = 0;
var cy;
for(var i=0;i<n;i++){
cy = -1* s * Math.sin(w * i * 20 + t);
y.push(cy- ly);
ly = cy;
}
}
function render() {
sintext.setAttribute("dx",x.join(' '));
sintext.setAttribute("dy",y.join(' '));
}
function frame() {
t += 0.01;
arrange(t);
render();
requestAnimationFrame(frame);
}
frame();
</script>
</body>
</html>
