課程
/前端開發
/Html5
/走進SVG
求源碼
2014-10-23
源自：走進SVG 5-1
正在回答
太感謝了
<!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>
舉報
SVG是HTML5 中矢量圖的標記語言，學習后掌握更多的干貨
2 回答
1 回答
3 回答
Copyright ? 2025 imooc.com All Rights Reserved | 京ICP備12003892號-11 京公網安備11010802030151號
購課補貼聯系客服咨詢優惠詳情
慕課網APP您的移動學習伙伴
掃描二維碼關注慕課網微信公眾號
2017-05-26
太感謝了
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>