Phần tử SVG trong HTML5
Ph n t SVG trong HTML5ầ ử
Hôm nay chúng mình xin gi i thi u thêm m t ph n t n a có nhi m v ớ ệ ộ ầ ử ữ ệ ụ
t ng t , cũng đ c s d ng đ v đ h a 2D và các ng d ng đ h a ươ ự ượ ử ụ ể ẽ ồ ọ ứ ụ ồ ọ
trên website, đó là ph n t SVG. V y SVGầ ử ậ có nh ng n i dung gì, cách s ữ ộ ử
d ng ra sao, đi m khác bi t c a nó và Canvas là nh th nào? B n hãy ụ ể ệ ủ ư ế ạ
cùng Quantrimang tìm hi u qua bài vi t này nhé.ể ế
SVG là gì?
SVG là vi t t t c aế ắ ủ Scalable Vector Graphics, là m t đ nh d ng hình nh ộ ị ạ ả
(t ng t nh JPG, PNG,... mà chúng ta v n th ng dùng).ươ ự ư ẫ ườ
SVG đ c s d ng đ v đ h a 2D và các ng d ng đ h a trên website,ượ ử ụ ể ẽ ồ ọ ứ ụ ồ ọ
ph n l n h u ích cho các s đ ki u vecto nh các bi u đ Pie, các đ th ầ ớ ữ ơ ồ ể ư ể ồ ồ ị
hai chi u trong h t a đ X, Yề ệ ọ ộ
SVG là chu n chính th c c a t ch c web th gi i W3C.ẩ ứ ủ ổ ứ ế ớ
u đi mƯ ể
Hình nh SVG có th phóng to nh ng không v nh.ả ể ư ỡ ả
Hình nh SVG có th đ c in v i ch t l ng cao b t kỳ đ phân ả ể ượ ớ ấ ượ ở ấ ộ
gi i nào.ả
Hình nh SVG có th đ c t o và ch nh s a b ng javascript.ả ể ượ ạ ỉ ử ằ
Hình nh SVG có th tìm ki m, đánh ch m c, nén,…ả ể ế ỉ ụ
Hình nh SVG có th chuy n đ ng s d ng các thành ph n ả ể ể ộ ử ụ ầ
animation đã xây d ng s n.ự ẵ
Hình nh SVG có th ch a liên k t đ n b t kỳ tài li u nào khác.ả ể ứ ế ế ấ ệ
SVG h u nh đ c h tr trên t t c các trình duy t.ầ ư ượ ỗ ợ ấ ả ệ
Ph n t <svg> trong HTMLầ ử
Ph n tầ ử <svg> trong HTML m t vùng ch a đ v đ h a.ộ ứ ể ẽ ồ ọ
SVG có m t vài ph ng th c đ v nh : đ ng th ng, hình h p, hình ộ ươ ứ ể ẽ ư ườ ẳ ộ
tròn, văn b n và hình nh đ h a...ả ả ồ ọ
V đ ng tròn SVGẽ ườ
Đ v đ ng tròn ta dùng thể ẽ ườ ẻ <circle>
<!DOCTYPE html>
<html>
<body>
<h2>V đ ng tròn trong SVG HTML5ẽ ườ </h2>
<svg width="300" height="300">
<circle cx="200" cy="100" r="80"
stroke="lightcoral" stroke-width="4" fill="moccasin" />
</svg>
</body>
</html>
Các thu c tính trongộ <circle> là:
cx: v trí tâm, tính t mép trái c a SVG.ị ừ ủ
cy: v trí tâm, tính t mép trên.ị ừ
r: bán kính.
fill: xác đ nh màu tô.ị
stroke: đ ng biên.ườ
K t qu :ế ả
V hình ellipse SVGẽ
Đ v hình ellipse ta s d ng thể ẽ ử ụ ẻ <ellipse>.
<!DOCTYPE html>
<html>
<body>
<h2>V hình ellipse trong SVG HTML5ẽ</h2>
<svg width="300" height="300">
<ellipse cx="150" cy="70" rx="100" ry="50"
stroke="darkslateblue" stroke-width="4" fill="lightblue" />
</svg>
</body>
</html>
Các tham s t ng t khi v hình tròn, thêm hai thu c tính:ố ươ ự ẽ ộ
rx: bán kính t tâm đ n mép bên trái.ừ ế
ry: bán kính t tâm đ n mép phía trên.ừ ế
K t qu :ế ả
V hình ch nh t SVGẽ ữ ậ
B n s d ng thạ ử ụ ẻ <rect> đ v hình ch nh t.ể ẽ ữ ậ
<!DOCTYPE html>
<html>
<body>
<h2>V hình ch nh t trong SVG HTML5ẽ ữ ậ </h2>
<svg width="400" height="100">
<rect width="400" height="100"
style="fill:lightcoral;stroke-width:10;stroke:pink" />
</svg>
</body>
</html>
K t qu :ế ả
V hình ch nh t bo góc SVGẽ ữ ậ
S d ng thử ụ ẻ <rect> đ v .ể ẽ
<!DOCTYPE html>
<html>
<body>
<h2>V hình ch nh t bo góc trong SVG HTML5ẽ ữ ậ </h2>
<svg width="400" height="180">
<rect x="150" y="20" rx="20" ry="20" width="150" height="150"
style="fill:red;stroke:black;stroke-width:5;opacity:0.5" />
</svg>
</body>
</html>
K t qu :ế ả
V đo n th ng SVGẽ ạ ẳ
Dùng <line> đ v các đo n th ng:ể ẽ ạ ẳ
<!DOCTYPE html>
<html>
<body>
<h2>V đo n th ng trong SVG HTML5ẽ ạ ẳ </h2>
<svg width="400" height="180">
<line x1="50" y1="20" x2="300" y2="100"
style="stroke:palevioletred;stroke-width:5"/>
</svg>
</body>
</html
K t qu :ế ả
V các đ ng g p khúc SVGẽ ườ ấ
Dùng <polyline> đ v đ ng g p khúc, trong đó thu c tính points theo t ể ẽ ườ ấ ộ ứ
t ch ra các t a đ x,y c a các đi m c n n i l i v i nhau:ự ỉ ọ ộ ủ ể ầ ố ạ ớ
<!DOCTYPE html>
<html>
<body>
<h2>V đ ng g p khúc trong SVG HTML5ẽ ườ ấ </h2>
<svg width="300" height="300">
<polyline points="10,10 80,10 80,80 150,80 150,150 220,150 220,220"
fill="pink" stroke="palevioletred" stroke-width="5" />
</svg>
</body>
</html>
K t qu :ế ả
có thể bạn quan tâm
Phần tử Canvas trong HTML5
9
826
383
Lập trình
9
(New)
Một số vấn đề lí luận chung về quan hệ phân phối và thực trạng quan hệ...
30
824
281
Kinh tế quản lý
30
(New)
Xem ảnh hưởng của nồng độ chế phẩm Openamix – LSC và Trichoderma lên k...
50
683
287
Khoa học tự nhiên
50
(New)
Khảo sát, đánh giá sự phân bố các chủng vi nấm Trichoderma trong các l...
60
738
570
Khoa học tự nhiên
60
(New)
Tận dụng nguồn gas sinh ra từ phân heo, được lên men trong quá trình ủ...
56
751
356
Khoa học tự nhiên
56
(New)
Tim hiểu về Broadcast Receiver - một trong những thành phần quan trọng...
16
734
311
Lập trình
16
(New)
Luận văn: phân tích nhân tố đã đưa ra mô hình về sự thỏa mãn trong côn...
61
878
271
Thạc sĩ cao học
61
(New)
Luận văn thạc sĩ: Tổng quan về “Lập trình linh hoạt” và “Quy trình cộn...
106
892
357
Thạc sĩ cao học
106
(New)
thông tin tài liệu
Hôm nay chúng mình xin giới thiệu thêm một phần tử nữa có nhiệm vụ tương tự, cũng được sử dụng để vẽ đồ họa 2D và các ứng dụng đồ họa trên website, đó là phần tử SVG. Vậy SVG có những nội dung gì, cách sử dụng ra sao, điểm khác biệt của nó và Canvas là như thế nào? Bạn hãy cùng Quantrimang tìm hiểu qua bài viết này nhé.
Mở rộng để xem thêm
tài liệu mới trong mục này
tài liệu hot trong mục này
tài liệu giúp tôi
Nếu bạn không tìm thấy tài liệu mình cần có thể gửi yêu cầu ở đây để chúng tôi tìm giúp bạn!
×
