SVG VẼ RADAR PHÒNG
THỦ CHỐNG ĐẠN ĐỊCH
USING SVG TO DRAW RADAR SYSTEM AGAINST ENEMIES’ BULLETS
<!DOCTYPE html>
<html
xmlns="http://www.w3.org/1999/xhtml">
<svg xmlns="http://www.w3.org/2000/svg"
width="5000"
height="3000">
<g
id="bullet" transform="translate(250,150)">
<circle
cx="0" cy="30" r="15" stroke="green"
fill="blue">
<animate
attributeName="cx" dur="2" from="290" to
="50" begin="B.click" end="S.click"="indefinite"/>
</circle></g> // enemy’s bullet
<g id="radar"
transform="translate(175,150)">
<ellipse
cx="0" cy="0" rx="40" ry="35"
stroke="red" fill="yellow">
<animateTransform attributeName="transform"
type="rotate"
dur="1"
from="0" to ="360" repeatCount="indefinite"/>
</ellipse> //máy phát sóng
<line
x1="0" y1="0" x2="150" y2="0"
stroke="red" stroke-width="2">
<animateTransform attributeName="transform"
type="rotate"
dur="2"
from="0" to ="360" begin="B.click" end="S.click" repeatCount="indefinite"/>
</line> // radar wave
<g
id="B">
<text
x="-40" y="10" font-size="20">START</g>
<g
id="S">
<text
x="35" y="15" font-size="20">STOP</g>
// rocket chận phi
đạn của địch
<image x=
"45" y="100" xlink:href="rocket1.gif" width="45"
height="40">
<animateMotion dur="1" from
="45,100" to ="50,-80" begin="B.click" end="S.click" repeatCount ="indefinite"/> // lấy hình đã vẽ
tồn trử trong document
</image>
</g>
</g>
</svg>
Chi Chú Hướng Dẫn.
SVG là chữ viết tắt của Scalable
Vector Graphic dùng để vẽ Vector Images trong cách viết của XML cho
nên không cần viết thêm tags của HTML.
SVG xuất hiện vào năm 1999 do công trình phát minh của Adobe,
Apple và IBM.
Vẽ hình bằng cách chúng ta tự chọn tọa độ x,y .SVG sẽ nối
các tọa độ thành hình vẽ.
Hình vẽ theo SVG có High
Resolution, có thể thu nhỏ hay giản rộng.
Chúng ta có thể làm hình SVG chuyển động theo ý muốn.
Chữ d nghĩa là bắt
đầu vẽ (depart)
Chữ M nghĩa là move to.
Chữ C nghĩa là curve.
Chữ L nghĩa là line.
Chữ A vẽ elliptical Arc
Chữ H vẽ horizontal
line.
Chư V vẽ vertical line.
Chữ S vẽ smooth curve.
Chữ Q vẽ quadratic
Bezier curve
Chư Z nghĩa là close
path, nghĩa là đóng hình vẽ
Trước khi bắt đâù vẽ
cần phải có declaration như sau.
Nếu thiếu thì hình
không hiện ra.
<!DOCTYPE html>
<html
xmlns="http://www.w3.org/1999/xhtml">
<svg xmlns="http://www.w3.org/2000/svg" width="5000"
height="3000">
HOẶC :
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg viewBox = "0 0 100 100" version =
"1.1">
Mỗi hình vẽ phải xếp riêng trong một cặp tag
<g>…</g>.
Những hình vẽ chúng ta muốn xếp trong cùng một nhóm thì
chỉ cần một cặp tag <g>…</g> cho nhóm đó mà thôi.
Mỗi nhóm cần có một ID để dễ phân biệt.
Xem bài viết trên,chúng ta thấy có 2 nhóm có ID khác nhau.
Trong bài nầy chử xử dụng hình đường thẳng goị là line và hình vòng tròn
gọi là circle
mà thôi.
SAU KHI VẼ XONG
,MUỐN HÌNH NÀO CHUYỂN ĐỘNG THÌ CẦN PHẢI HỌC BÀI SVG ANIMATION.
Trong trò chơi nầy
chúng ta xử dụng :
1-animate
attributeName cho chuyển động
theo chiều ngang hay dọc của một element.
Thí dụ attributeName=”width”, attributeName=”top”, attributeName=”x”
Có thể dùng animate attributeName để
làm chuyển động nhiều elements cùng một lúc.
Thí dụ. animate attributeName=”x”, animate attributeName=”r”, animate attributeName=”cx”,
2-animateTransform attributeName="transform" cho chuyển động xê
dịch tại chỗ và phải có kèm thêm chữ type=”rotate”.
3-animateMotion cho chuyển động đi khắp nơi, áp dụng cho hình vẽ
path theo SVG hoặc hình vẽ thông thường hoặc hình chụp bằng máy ảnh.
