SMIL LÀM HÌNH SVG CHUYỂN ĐỘNG
SMIL nghĩa là Synchronized Multimedia Integration xuất hiện version
đầu tiên vào năm 1998. Với version 2.1 năm 2005 có nhiều động tác làm
di chuyển hinh SVG.
1- animate attributeName
làm di chuyển hình svg theo trục x, hoặc trục y .
2- animateMotion
làm di chuyển hình svg theo tọa độ x,y .
Rất đơn giản không cần Javascript. Viết động tác làm di chuyển trong phạm vi của hình. Viết thời gian di chuyển , ấn định chỗ khởi hành và chỗ ngừng lại rồi cho lặp lại số lần di chuyển.
Muốn khởi hành và ngừng lại theo y muốn thì viết codes cho nút start và stop.
-----------------------------------------------------------
A-XỬ DÚNG ĐỘNG TÁC animate attributeName.
Đây là thí dụ làm hình svg
chuyển động trên trục x từ vị trí 60 pxels tới vị trí 160 pixels.
Hình di chuyển liên tục không
ngừng lại. Muốn ngừng phải tạo nút STOP.
Thị dụ 1.
<svg xmlns="http://www.w3.org/2000/svg"
width="5000" height="3000">
<circle cx="50" cy="150"
r="20" stroke="red" fill="blue">
<animate attributeName="cx"
dur="4" from="60"
to="160"
repeatCount="indefinite"/>
</circle>
</svg>
Thí du 2.
<svg xmlns="http://www.w3.org/2000/svg"
width="5000" height="3000">
<circle
cx="50" cy="150" r="20" stroke="red"
fill="blue">
<animate
attributeName="cx"// viết riêng chữ animate
begin="0s" dur="4" // viểt
thêm chữ begin
from="60"
to="160"
repeatCount="indefinite"/>
</circle>
</svg>
B-XỬ DỤNG
ĐỘNG TÁC animateMotion
Động tác goị là animateMotion
của SMIL làm hinh svg chuỷển đông theo tọa độ
từ điểm nầy sang điểm khác như sau.
Thí dụ.
<svg xmlns="http://www.w3.org/2000/svg" width="5000" height="3000">
<circle cx="50" cy="150"
r="20" stroke="red" fill="blue">
<animateMotion dur="4"
from="60,100" to="150,200"
repeatCount="indefinite"/>
</animateMotion>
</circle>
</svg>
Hình di chuyển liên tục không ngừng lại. Muốn
ngừng phải tạo nút STOP
TẠO NÚT START VÀ STOP.
<svg xmlns="http://www.w3.org/2000/svg"
width="5000" height="3000">
<g id="1">
<circle
cx="50" cy="150" r="20" stroke="red"
fill="blue">
<animateMotion begin="B.click"
end="S.click"
dur="4" from="60,100" to="150,200"
repeatCount="indefinite"/>
</circle>
<g id="B">
<text
x="20" y="120"
fill="blue">START</text></g>
<g id="S">
<text
x="100" y="120"
fill="red">STOP</text></g>
</g>
</svg>
