chrome浏览器下后台疯狂报错，火狐下则正常。求大神指点。-慕课网

首页课程实战体系课手记专栏慕课教程

chrome浏览器下后台疯狂报错，火狐下则正常。求大神指点。

来源：5-2 SVG-利用 dy 属性实现波浪文字效果

HakuPretty

2018-05-27 11:35

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<defs>

</pattern>

</defs>

<text x="100" y="150" font-size="14px" font-family="Microsoft YaHei">ABCDEFGHIJKLMNOPQRSTUVWXYZ</text>

</svg>

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>

写回答关注

1回答

Nice_lq

2021-04-26 10:33:05

现在就可以了

0 0

走进SVG

SVG是HTML5 中矢量图的标记语言，学习后掌握更多的干货

52643 学习 · 213 问题

查看课程

相似问题

为什么实现不了，求大神指点

回答 4

正则匹配结果

回答 1

回答 1

回答 1

回答 6