你的位置:首页 > Java教程

[Java教程]自编SVG小案例

1.转动的花朵导航

实现思路:用svg中的path标签通过贝塞尔曲线画出一朵花瓣,然后其他四朵花瓣逐个转动相对应的角度,同时在添加a链接,最后添加连续运动的动画属性:

 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4   <meta charset="UTF-8"> 5   <title>Document</title> 6   <style> 7     svg{ 8       width: 100%; 9       height: 100%;10       position: absolute;11       top: 0;12       left:0;13     }14     path{15       width: 100%;16       fill:#F6E6CC;17     }18   </style>19 </head>20 <body>21   <div id="nav">22     <svg ="http://www.w3.org/2000/svg" version="1.1" >23       <g>24         <a xlink:href="#home">25            <path d="M150 150 C200 360, 360 200, 150 150 Z"  fill="#fff" />26           <text x="170" y="210" transform="rotate(45 200 220)" style="fill:#000;font-size:16px;">home</text>27           <animateTransform attributeName="transform" begin="0s" dur="10s" type="rotate" from="0 150 150" to="360 150 150" repeatCount="indefinite"/>28         </a>29       </g>30       <g>31         <a xlink:href="#about">32            <path d="M150 150 C200 360, 360 200, 150 150 Z"  fill="#fff" />33           <text x="170" y="210" transform="rotate(45 200 220)" style="fill:#000;font-size:16px;">about</text>34         </a>35         <animateTransform attributeName="transform" begin="0s" dur="10s" type="rotate" from="-72 150 150" to="288 150 150" repeatCount="indefinite"/>36       </g>37       <g>38         <a xlink:href="#skill">39            <path d="M150 150 C200 360, 360 200, 150 150 Z"  fill="#fff" />40           <text x="170" y="210" transform="rotate(45 200 220)" style="fill:#000;font-size:16px;">skill</text>41         </a>42          <animateTransform attributeName="transform" begin="0s" dur="10s" type="rotate" from="-144 150 150" to="216 150 150" repeatCount="indefinite"/>43       </g>44       <g>45            <path d="M150 150 C200 360, 360 200, 150 150 Z"  fill="#fff" />46         <a xlink:href="#portfolio">47           <text x="170" y="210" transform="rotate(45 200 220)" style="fill:#000;font-size:16px;">portfolio</text>48         </a>49          <animateTransform attributeName="transform" begin="0s" dur="10s" type="rotate" from="-216 150 150" to="144 150 150" repeatCount="indefinite"/>50       </g>51       <g>52         <a xlink:href="#contact">53            <path d="M150 150 C200 360, 360 200, 150 150 Z"  fill="#fff" />54           <text x="170" y="210" transform="rotate(45 200 220)" style="fill:#000;font-size:16px;">contact</text>55         </a>56          <animateTransform attributeName="transform" begin="0s" dur="10s" type="rotate" from="-288 150 150" to="72 150 150" repeatCount="indefinite"/>57       </g>58     </svg>59   </div>60 </svg>  61 </body>62 </html>
一朵转动的小花

2.一滴牛奶

实现思路:通过贝塞尔曲线绘画路径

 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4   <meta charset="UTF-8"> 5   <title>Document</title> 6   <script src="js/jquery-1.7.2.min.js"></script> 7   <script src="js/nav.js"></script> 8   <style> 9     *{10       margin: 0;11       padding: 0;12     }13     li{14       list-style: none;15     }16     /*svg样式*/17     #blob{18       width: 100%;19       height: 100%;20       position: absolute;21       top: 0;22       left:0;23     }24     #blob_path{25       width: 100%;26       fill:#fff;27     }28     /*svg样式结束*/29     #nav{30       width: 100%;31       height: 100%;32       position: fixed;33       background: #FED057;34     }35     h1{36       text-align: center;37       margin-top: 200px;38       color: #fff;39     }40   </style>41 </head>42 <body>43   <div id="nav">44     <svg ="http://www.w3.org/2000/svg" version="1.1" id="blob">45        <path id="blob_path" d="M0 0 H2000V0L0,0 Z" fill="#fff"/>46     </svg>47     <h1>点击网页预览效果</h1>48   </div>49 </body>50 </html>
一滴牛奶html+css
 1 $(function(){ 2   var timer;//定时器 3   var target_c5_c6_y=0;//目标值 4   var current_c5_c6_y=50;//起始值 5   var target_c6_c9_x=0;//目标值 6   var current_c6_c9_x=50;//起始值 7   var target_c3_y=0;//目标值 8   var current_c3_y=50;//起始值 9   var target_c4_c7_y=0;//目标值10   var current_c4_c7_y=50;//起始值11   var target_c8_y=0;//起始值12   var current_c8_y=50;//起始值13 14   blob = $('#blob'),15   blobPath = $('#blob_path'),16 17   $('body').click(function(){18     svgCurve(270,200,80,150,80);19   });20   //流体动画21   function svgCurve(tar1,tar2,tar3,tar4,tar5){22     var newCurve;23     target_c5_c6_y=tar1;//目标值24     target_c6_c9_x=tar2;//目标值25     target_c3_y=tar3;//目标值26     target_c4_c7_y=tar4;//目标值27     target_c8_y=tar5;//目标值28     timer=setInterval(function(){29       current_c5_c6_y=current_c5_c6_y+(target_c5_c6_y-current_c5_c6_y)/5;30       current_c6_c9_x=current_c6_c9_x+(target_c6_c9_x-current_c6_c9_x)/2;31       current_c3_y=current_c3_y+(target_c3_y-current_c3_y)/2;32       current_c4_c7_y=current_c4_c7_y+(target_c4_c7_y-current_c4_c7_y)/2;33       current_c8_y=current_c8_y+(target_c8_y-current_c8_y)/2;34       newCurve = "M0 0 C50 50,100 "+current_c3_y+" ,80 "+current_c4_c7_y+" C40 "+current_c5_c6_y+", "+current_c6_c9_x+" "+current_c5_c6_y+", 160 "+current_c4_c7_y+" C120 "+current_c8_y+","+current_c6_c9_x+" 0,2000 0 V0H0 Z";35       blobPath.attr('d', newCurve);36     },80);37   }38 39 });
一滴牛奶nav.js