最新四色米奇影视777在线看,久99,а√天堂资源在线地址bt

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

求源碼

黑白豬

2014-10-23

源自：走進(jìn)SVG 5-1

關(guān)注問題我要回答

1155

操作

收起

2 回答

cobn
2017-05-26

太感謝了

0 回復(fù) 有任何疑惑可以回復(fù)我~

收起回答

adrain
2015-12-28

<!DOCTYPE html>
<html lang="en">
<head>
? ?<meta charset="UTF-8">
? ?<title>Title</title>
</head>
<body>
<svg width="1200" height="1000" xmlns="http://www.w3.org/2000/svg">
? ?<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="100" style="font-size:30px;">
? ? ? ?ABCDEFGHIJKLMNOPQRSTUVWXYZ
? ?</text>
? ?<path d="M100,0V200M0,100H200" stroke="red"></path>
</svg>
<script>
? ?//x=[20,20,20...]
? ?//y=s * sin(w*x + t);
var n=26;
? ?var x=[];
? ?var y=null;
? ?var i=n;
? ?var s=100;
? ?var w=1;
? ?var t=0;

? ?while (i--) x.push(20);

? ?function arrange(t){
? ? ? ?y= x.map(function(x){
? ? ? ? ? ?return s * Math.sin( w * x + t );
? ? ? ?});
? ?};

? ?function render(){
? ? ? ?sintext.setAttribute('dx', x.join(' '));
? ? ? ?sintext.setAttribute('dy', x.join(' '));
? ?}
? ?render();

</script>
</body>
</html>