SVG动画.animateTransform
生活随笔
收集整理的這篇文章主要介紹了
SVG动画.animateTransform
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
1、來自于：SVG之Animation - 前端學習筆記 - SegmentFault.html（https://segmentfault.com/a/1190000009371194）
2、AnimateTransform.html（UTF8）
ZC：下面的屬性（type="scale" from="1" to="4 2"），實際等價于（type="scale" from="1 1" to="4 2"） ∵scale是2個參數，（from="1"）是省略了一個參數。
ZC：同樣（type="rotate" from="0" to="45"） 也是省略了參數，但是 在寫 圖形的屬性的時候?rotate是以 SVG的(0,0)坐標為中心的，這里 同樣是這樣的...（可以觀察第二個矩形的變化）
2.1、測試代碼
<!DOCTYPE html><html> <head><meta charset="UTF-8"> </head><body><svg width="800" height="600" viewBox="-400 -300 800 600" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" ><!--矩形中心 == SVG的(0,0)點--><rect x="-10" y="-10" width="20" height="20" style="fill: #ff9; stroke: black;"><animateTransform id="a1" attributeName="transform" attributeType="XML" type="scale" from="1" to="4 2" additive="sum" begin="0s" dur="4s" fill="freeze"></animateTransform><animateTransform attributeName="transform" attributeType="XML" type="rotate" from="0" to="45" additive="sum" begin="a1.end" dur="4s" fill="freeze"></animateTransform></rect><!--矩形中心 != SVG的(0,0)點--><rect x="20" y="20" width="20" height="20" style="fill: #ff9; stroke: black;"><animateTransform id="a1" attributeName="transform" attributeType="XML" type="scale" from="1" to="4 2" additive="sum" begin="0s" dur="4s" fill="freeze"></animateTransform><animateTransform attributeName="transform" attributeType="XML" type="rotate" from="0" to="45" additive="sum" begin="a1.end" dur="4s" fill="freeze"></animateTransform></rect></svg></body> </html>?
3、
4、
5、
?
轉載于:https://www.cnblogs.com/H5UI/p/8405789.html
總結
以上是生活随笔為你收集整理的SVG动画.animateTransform的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 多态的理解(一)
- 下一篇： 数据结构与算法（3）-----队列和栈