文章詳情頁
html5 - svg如何做到一組動畫循環
瀏覽:116日期:2023-01-29 15:27:39
問題描述
問題解答
回答1:如果只是單純的改變寬度,少年可以這樣實現
<svg> <rect x=’20’ y=’20’ width=’250’ height=’250’ fill=’blue’><animate animateType='css' attributeName='width' values='250;0;250' dur='3s' repeatCount='indefinite'/> </rect></svg>回答2:
給animate添加id后,使用begin來指定動畫開始的時間為另一個的結束。
不清楚有沒有更好的辦法。
<svg> <rect x='20' y='20' fill='blue'><animate attributeType='CSS' attributeName='width' begin='0s; second.end' from='250' to='0' dur='1s'></animate><animate attributeType='CSS' attributeName='width' begin='first.end' from='0' to='250' dur='1s'></animate> </rect></svg>
標簽:
Html5
相關文章:
1. javascript - vscode alt+shift+f 格式化js代碼,通不過eslint的代碼風格檢查怎么辦。。。2. javascript - 這不是對象字面量函數嗎?為什么要new初始化?3. javascript - [js]為什么畫布里不出現圖片呢?在線等4. javascript - 如何將一個div始終固定在某個位置;無論屏幕和分辨率怎么變化;div位置始終不變5. javascript - 原生canvas中如何獲取到觸摸事件的canvas內坐標?6. javascript - 求解答:實例對象調用constructor,此時constructor內的this的指向?7. javascript - 有什么比較好的網頁版shell前端組件?8. html - vue項目中用到了elementUI問題9. html5 - 有可以一次性把所有 css外部樣式轉為html標簽內style=" "的方法嗎?10. python - 如何判斷爬蟲已經成功登陸?
排行榜
