                        課程
                    
                        /前端開(kāi)發(fā)
                        
                            /Html5
                        
                        /走進(jìn)SVG

本節(jié)源碼，拿走不謝。

<!DOCTYPE?html>
<html>
<head>
????<meta?charset="UTF-8">
????<title>svg</title>
</head>
<body>
????<svg?xmlns="http://www.w3.org/2000/svg"?width="1000"?height="1000">
????????<defs>
????????????<pattern?id="grid"?x="0"?y="0"?width="20"?height="20"?patternUnits="userSpaceOnUse">
????????????????<path?stroke="#F0F0F0"?fill="none"?d="M0,0H20V20"></path>
????????????</pattern>
????????</defs>
????????<rect?width="1200"?height="1000"?fill="url(#grid)"></rect>
????????<text?id="sintext"?x="100"?y="160"?style="font-size:?14px;font-family:'Arial'">ABCDEFGHIJKLMNOPQRSTUVWXYZ</text>
????????<path?d="M100,0?V200M0,100H200"?transform="translate(0,60)"?stroke="red"></path>
????</svg>
????<script>
????????var?n?=?26;
????????var?x?=?[];
????????var?y?=?null;?
????????var?i?=?n;
????????var?s?=?100;
????????var?w?=?0.02;
????????var?t?=?0;
????????while(i--)?x.push(10);
????????function?arrange(t){
????????????y?=?[];
????????????var?ly?=?0,?cy;
????????????for(i=0;i<n;++i){
????????????????cy?=?-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.02;
????????????arrange(t);
????????????render();
????????????requestAnimationFrame(frame);
????????};
????????frame()
????</script>
</body>
</html>