VẼ CON CÁ DI CHUYỂN TRÊN
QUỶ ĐẠO ELLIPSE
DÙNG PHƯƠNG PHÁP SVG VẼ HÌNH ELLIPSE, VẼ CON CA
RỒI LÀM CHO CÃ DI CHUYỂN TRÊN ELLIPSE THEO
PHƯƠNG PHÁP animateMotion.
---------------
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="100%" height="100%">
<g>
// Viết codes vẽ path ellipse
<path
id = "ellipse"
d = " M 225,275
a 180,100 0 1,1 0,0.0009 " Z
stroke = "green" stroke-width = "4" fill =
"none" />
</g>
<g transform="translate(-160,-160)">
// Viết codes vẽ con cá
<path
d="M 200 160,C250 200,350 120,200 160,
L 200 160,180 170,
L 200 160,175 150,
C 175 150,185 160,180 170 z"
stroke="red" stroke-width="2" fill="green"/>
<circle cx="260" cy="155" r="3" stroke="black" fill="blue"/>
// Viết codes làm cá di chuyển .
<animateMotion dur="10"
rotate="auto" repeatCount="indefinite"
begin ="B.click" end="S.click">
<mpath
xlink:href="#ellipse"/>
</animateMotion>
</g>
//Viết codes tạo nút START và STOP.
<g id ="B">
<text x = "250" y = "150" font-size ="15" font-family = "arial" fill="blue" >START</g>
<g id = "S">
<text x = "80" y =
"50" font-size ="15" font-family = "arial"
fill="red" >STOP</g>
</g>
</svg>
