作圖

svg動畫筆記

by

移動 <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 MDN介紹 示例： <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 ... Read more