I- LÝ THUYẾT SƠ BỘ.
SVG (Scalable Vector
Graphics) là ngôn ngữ ( language ) dùng để vẽ hình hai chiều
trong Browser bằng cách viết code của tọa
đố x,y trong SVG và được xem như XML
SVG đã thành tiêu chuẩn quốc tế W3 từ năm 1999.
Do đó nếu Browser nào không hổ trợ SVG thì không thể
vẽ gì được.
Dung cãch goị là
Transform cua SVG và dùng Browser Google
rất tốt như hinh vẽ nầy gồm có vòng tròn di chuyển trên 3 cạnh của
hình tam gỉac.
Dưới đây có 3 bài hương dần vẽ căn bản cần học trươc.
SVG có những tiện lợi là dễ thực hành, đơn giản, dễ nhớ và chúng ta làm hình vẽ di động rất dể dàng với SMIL ( Synchronized Multimedia Integration Language ) ,
Với SVG,chúng ta có thể vẽ được 3 loại hình là : Vector Graphics Shapes, Images, Text.
Hình SVG có thể được thu nhỏ hay phình lớn tuỳ
theo kích thước ấn định nhưng hình không bị nhòa như hình bitmap vẽ bằng html
5 Canvas.
Trước khi vẽ
chúng ta cần biễt Transform cua SVG là gỉ?
SVG có một đặc điểm rất hay gọi là transform attribute. Dùng đặc điểm nầy chúng ta có thể thay đổi vị trí của tọa độ, thay đổi hình dạ̣ng và thay đổi độ lớn hay độ nhỏ của hình vẽ mà không cần phải vẽ lại hình khác.
Transform attribute của SVG gồm có.
1-Transform=”
translate(x,y)” để chuyển đổi vị trí toạ độ nếu hình vẽ bị che khuất.
Thí dụ transform=” translate(175, 150)”.Nếu không xác định y thì default sẽ cho 0
2-Transform=” scale (x,y)” để thay đổi hình vẽ lớn hơn hay nhỏ hơn
tùy ý của người vẽ.
Thí
dụ transform="scale(0.5)”.Nếu chỉ chọn một con số cho scale mà thôi thì tòan bộ
thành phần của hình sẽ theo scale của con số đó.
3-Transform=”rotate(angle,cx,cy)” để xoay chuyển hình vẽ theo góc độ
và thay đổi tâm (center ) của hình.
Thí
dụ transform=” rotate(45,100,100)”.Nếu không xác định cx và cy thì default sẽ rotate
chung quanh vị trí đã có ( rotates around the origin)
4-Transform=”skewX(angle)”
làm hình nghiên vào trục X.
Thí dụ
transform=”skewX(5)”.Khỏang
cách giữa hình và trục là tan của góc ( the distance of skew is the tan of the angle)
5- Transform=”skewY(angle)” làm hình nghiên với trục Y
Thí dụ transform=” skewY(5)"
II-THỰC TẬP.
Gồm có 3 bài căn bản
cần nhớ.
1-Vẽ vòng tròn theo ý
muốn rồi cho di chuyển tới lui giữa hai tọa độ.
2-Vè vòng tròn di
chuyển trên một quỹ đạo là 3 cạnh của hình tam giac.
3-Vẽ vòng trôn di chuyển trên quỹ đạo là hinh ellipse.
I–BÀI SỘ 1-
VẼ MỘT
VONG TRÒN THEO Ý MUỐN.
Trước hết phải ấn đính kích thước đo
bằng pixel của khung hình để ve goị là Viewport
.
cx và cy là toạ độ của tâm vòng tron. r
là bán kính.
Tô vòng tròn màu đỏ
viền vòng tròn màu xanh có bề day của viền theo ý múôn.
a-Đây là program vẽ một vòng tròn.
<svg
xmlns="http://www.w3.org/2000/svg" width="100%"
height="100%">
<circle
cx="200" cy="50" r="50"
fill="red" stroke="blue" stroke-width ="10">
</circle>
</svg>
Hình vòng tròn xuất hiện trong viewport..
Viewport có hai trục tọa độ x và y là khung sẽ chứa
hình vẽ.
Width nằm ngang trên trục x và Height nằm thẳng đứng trân trục y nhưng hương
xuống dưới trục x.
Muốn y vượt
lên trên trục x thi phải viết thêm dấu trừ cạnh chữ y.Thí dụ: -y
Thí dụ y= ”-160”. vật sẽ
vượt lên trên trục x tới 160 trên trục y. Đơn vị tính trên hai trục là pixel.Tất cả hình vẽ nằm trong viewport có độ lớn tự động được tính
bằng pixel .
b- Đây program làm vòng tròn di chuyển
tới lui.
<svg
xmlns="http://www.w3.org/2000/svg" width="100%"
height="100%">
<g>
<circle
cx="200" cy="50" r="50"
fill="red" stroke="blue" stroke-width ="10">
<animateMotion dur="3" from="100,90" to="400,90"
repeatCount="indefinite"/>
</animateMotion>
</circle>
</g>
</svg>
Muốn làm vong trõn của SVG chuyễn đông thi phải
dùng phương pháp goị là SMIL (
Synchronized Multimedia Integration Language ).
Phương pháp ầy xuât hiện năm 1998
Hình vẽ giông như chiếc xe. SMIL giống như tài
xế.
Viết tái xế trong xe nghĩa là viết chữ animateMotion.
BÀI SỔ 2-
VONG TRON CHẠY TRÊN 3 CẠNH HÌNH TAM GIÁC.
Đây là program.
Vẽ riêng quỹ đaọ
hinh tam giác có id=”uphill” như sau.
<svg
xmlns="http://www.w3.org/2000/svg"
width="100%"
height="100%">
<g> // code nầy sẽ xuất hịên hình tam
giác.
<path id="uphill"
d="M 80 200,L 160 100,320 250
Z"
stroke="darkgreen"
stroke-width="4" fill="none"/>
</g>
//viết riêng tiếp theo dưới code của
hình tam giac như sau.
<g
transform="translate(-160,-160)">
//nhớ có dấu trừ.
<circle cx="160"
cy="155" r="35" stroke="blue" stroke-width
"10" fill="red"/>
<animateMotion
dur="10" rotate="auto"
repeatCount="indefinite">
<mpath xlink:href="#uphill"/>// nhớ có dấu #
</animateMotion>
</g></svg>
BÀI SỐ 3-
VÒNG TRÒN DI CHUYỂN TRÊN QUỸ ĐẠO ELLIPSE
Đây program lam vòng tròn di chuyển trên ellipse.
<svg
xmlns="http://www.w3.org/2000/svg"
width="100%"
height="100%">
<g> // phương pháp nầy chỉ dùng
vẽ ellipse.
<path id ="ellipse"
d="M 225,275
a 100, 50 0 1,1 0,0.00099"Z
cx ="200" cy="160"
rx = "120" ry = "70"
stroke="black"
stroke-width="5" fill="none"/>
</g>
<g
transform="translate(x,y)">// không cho tọa độ thi default
// phai có transform thi quà cầu mới
nằm trên ellipse.
<circle cx="6"
cy="3" r="35" stroke="blue" stroke-width
="10" fill="red"/>
<animateMotion dur="10"
rotate="auto" repeatCount="indefinite">
<mpath
xlink:href="#ellipse"/>//phải có mpath trong animate Motion
</animateMotion>
</circle>
</g></svg>
Phải có chữ path id. Chữ d="M 225,275 nghĩa là di huyển ngòì bút vẽ tới địa điểm M có tóa độ 225,275 .Rồi di chuyển ngoì bút tới đặc điểm của hình vẽ là : a 100, 50 0 1,1 0,0.00099" Z .
Chử a nghĩa lả arc ,đường cong. Chư Z nghĩa la closepath.
Khi chọn vẽ theo phương pháp path thi phải có đu nhừng chữ d , a, M , Z. Nễu thiếu hình không xuất hiện.
100, 50 là độ dai của hai trục ellipse.
Con sô O là góc quay của ellipse.
Hai con số 1, 1 có nghĩa như sau.
Co số 1 đầu tiên lam cho ellipse lớn hơn hoặc bằng 180.
Con số 1 tiểp theo làm cho ellipse ở phần dương, nằm trên trục hoành
Nếu thay bằng con sổ O thi ellipse sẽ ở phần âm ,sẽ ở dưới trục hoành.
Con số 0,0.00099 Z làm cho ellipse khép kín.
Nếu muốn ellipse không khép kín thì viết O,OO9 Z họăć 0,1Z hay 0,25Z
------------------
CẪ̀U CHÚC HỌC NHANH XÂY DỰNG VN HÙNG MẠNH.
