移動
<animateMotion dur="0.5s" begin="animateMotion7455.end + 3s" fill="freeze" additive="sum" id="animateMotion7456">
<mpath xlink:href="#path1050" />
</animateMotion>
路徑起點要在畫板的左上角。如果提示沒有定義命名空間則加上xmlns:xlink="http://www.w3.org/1999/xlink"
如果開啟rotate="auto",那就必須把要移動的元素的x跟y刪掉或等於0,再把路徑起始點移到元素起始處。
動畫
<animate attributeName="y" fill="freeze" id="aa3" begin="aa2.end" dur="1s" values="100;150" />
這個似乎比animateMotion更好用。
移形animateTransform
示例:
<svg width="120" height="120" viewBox="0 0 120 120"
xmlns="http://www.w3.org/2000/svg">
<polygon points="60,30 90,90 30,90">
<animateTransform attributeName="transform"
attributeType="XML"
type="rotate"
from="0 60 70"
to="360 60 70"
dur="10s"
repeatCount="indefinite"/>
</polygon>
</svg>
根據這裏的描述,如果想添加多個animateTransform就需要套多層<g></g>。但是後来發現這個說法是錯的,正確操作是加入屬性additive="sum"
,来自這裏。(update at 2024-03-12:同時還要用values,不能用from-to。)(要先轉後走。)
2022-07-17 14:51:35 補充:如果是位移translate,那matrix(1 0 0 1 X Y)等於translate(X,Y),同時additive="sum"
會加到原先的transform裏去。animateTransform不支持type="matrix"。
實現翻轉
一閃一閃Set
<g id="241" sb:layerName="ani" sb:layerVisible="true" sb:layerLocked="false" >
<set id="set7" attributeName="opacity" to="1" begin="0;set8.end" dur="1s" />
<set id="set8" attributeName="opacity" to="0" begin="set7.end" dur="1s" />
</g>
一閃一閃可以用兩個set互調實現,這應該算是最簡單的動畫了。(好像animate也有這種效果?)