SVG實現波浪效果

svg path：C 貝塞爾曲線繪制波浪形狀

? ? 　　　? A 繪制圓弧形

svg animate：制作波浪動畫，為了波浪動畫效果自然，設置values關鍵點?　　　　　

　　　　　　attributeName：變化屬性名

　　　　　　dur：動畫時間

　　　　　　repeatCount：循環次數

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="400" height="400"><g id="circle"><text x="115" y="115" font-size="36px" fill="#000" text-anchor="middle" transform="translate(0,18)">50%</text><circle r="100" cx="115" cy="115" fill="none" stroke-width="10" stroke="rgb(135,206,250)" /><circle cx="115" cy="115" r="90" fill="none" stroke="white" /><path d="M 25,115 C 67.5,74 162.5,156 205,115 A 90,90 0 0,1 25,115 z" fill="rgba(135,206,250,.8)"><animate attributeName="d" attributeType="XML" dur="3s" repeatCount="indefinite" values="M 25,115 C 67.5,74 162.5,156 205,115 A 90,90 0 0,1 25,115 z;M 25,115 C 67.5,115 162.5,115 205,115 A 90,90 0 0,1 25,115 z;M 25,115 C 67.5,156 162.5,74 205,115 A 90,90 0 0,1 25,115 z;M 25,115 C 67.5,115 162.5,115 205,115 A 90,90 0 0,1 25,115 z;M 25,115 C 67.5,74 162.5,156 205,115 A 90,90 0 0,1 25,115 z;"></animate></path></g> </svg>

效果圖：

更多專業前端知識，請上 【猿2048】www.mk2048.com

總結

以上是生活随笔為你收集整理的SVG实现波浪效果的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。