SVG實現波浪效果
阿新 • • 發佈:2018-03-30
xmlns 動畫效果 middle form circle spa version text translate
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>
效果圖:
SVG實現波浪效果