VietTuts

Tự Học Lập Trình Online

  • Home
  • Java
  • Servlet
  • JSP
  • Struts2
  • Hibernate
  • Spring
  • MyBatis
  • Java WS
  • C
  • C++
  • C#
  • Python
  • PHP
  • Excel
  • VBA
  • Web
    • JavaScript
    • JQUERY
    • JSON
    • AJAX
    • CSS
    • HTML
    • HTML5
    • Node.js
    • Angular 7
  • SQL
    • MySQL
    • SQL Server
  • Misc
    • Eclipse
    • Phần mềm tiện ích
    • Cấu trúc DL&GT
    • Selenium Test

HTML5 Tuts

HTML5 là gì? Cú pháp HTML5 cơ bản Các thuộc tính HTML5 Sự kiện trong HTML5 WEB Forms 2 trong HTML5 SVG trong HTML5 MathML trong HTML5 WEB Storage trong HTML5 WEB SQL trong HTML5 Sự kiện Server-Sent trong HTML5 WEB Socket trong HTML5 Canvas trong HTML5 Audio & Video trong HTML5 GeoLocation trong HTML5 Micro Data HTML5 Drag & Drop trong HTML5 Web worker trong HTML5 Tổng hợp các thẻ cơ bản trong HTML5 Tổng hợp các thẻ cũ trong HTML5 Tổng hợp các thẻ mới trong HTML5
1 / 3
❮ ❯

SVG trong HTML5


Web Forms 2.0 trong HTML5
MathML trong HTML5

Nội dung chính

  • SVG trong HTML5
  • Quan sát các SVG file
  • Nhúng SVG trong HTML5
  • HTML5 − Đường tròn SVG
  • HTML5 − Hình chữ nhật SVG
  • HTML5 − Đường thẳng SVG
  • HTML5 − Hình SVG Elip
  • HTML5 − Hình đa giác SVG
  • HTML5 − Hình nhiều mặt (polyline) SVG
  • HTML5 − Hình SVG Gradients
  • HTML5 − Hình ngôi sao

SVG trong HTML5

SVG là viết tắt của Scalable Vector Graphics và nó là một ngôn ngữ để mô tả đồ họa 2D và các ứng dụng đồ họa trong XML và XML sau đó được trả lại bởi một SVG Viewer.

SVG 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 trở thành một W3C Recommendation từ 14/1/2003 và bạn có thể kiểm tra phiên bản mới nhất của nó tại: SVG Specification.



Quan sát các SVG file

Hầu hết các trình duyệt web có thể hiển thị SVG giống như chúng có thể hiển thị PNG, GIF, và JPG. Người sử dụng IE có thể phải cài đặt Adobe SVG Viewer để có thể quan sát SVG trên trình duyệt.


Nhúng SVG trong HTML5

HTML5 cho phép nhúng SVG trực tiếp bởi sử dụng thẻ ... mà có cú pháp đơn giản sau:


<svg xmlns="http://www.w3.org/2000/svg">
   ...
</svg>

Firefox 3.7 cũng đã giới thiệu một tùy chọn cấu hình (about:config), từ đây bạn có thể kích hoạt tính năng HTML5 bởi sử dụng các bước sau:

  • Nhập about:config trong thanh địa chỉ Firefox.

  • Nhấn nút "I'll be careful, I promise!" trên hộp cảnh báo xuất hiện (và đảm bảo là bạn đồng ý với nó!).

  • Nhập html5.enable vào trong thanh lọc tại đầu trang.

  • Hiện tại nó sẽ là disable, vì thế nhấn nó để chuyển giá trị thành true.

Bây giờ Firefox HTML5 Parser sẽ được kích hoạt và bạn có thể trải nghiệm các ví dụ sau:



HTML5 − Đường tròn SVG

Sau đây là phiên bản HTML5 của một ví dụ SVG mà sẽ vẽ một vòng tròn sử dụng thẻ :



<!DOCTYPE html>

<html>
   <head>
   
      <style>
         #svgelem {
            position: relative;
            left: 50%;
            -webkit-transform: translateX(-20%);
            -ms-transform: translateX(-20%);
            transform: translateX(-20%);
         }
      </style>
      <title>SVG</title>
      <meta charset = "utf-8" />
   </head>
   
   <body>
      <h2 align = "center">HTML5 SVG Circle</h2>
      <svg id = "svgelem" height = "200" xmlns = "http://www.w3.org/2000/svg">
         <circle id = "redcircle" cx = "50" cy = "50" r = "50" fill = "red" />
      </svg>
   </body>
</html>

Nó sẽ cho kết quả sau trong phiên bản mới nhất của Firefox đã kích hoạt HTML5:

HTML5 SVG Circle

HTML5 − Hình chữ nhật SVG

Sau đây là phiên bản HTML5 của một ví dụ SVG mà sẽ vẽ một hình chữ nhật sử dụng thẻ :



<!DOCTYPE html>
<html>
   <head>
   
      <style>
         #svgelem {
            position: relative;
            left: 50%;
            -webkit-transform: translateX(-50%);
            -ms-transform: translateX(-50%);
            transform: translateX(-50%);
         }
      </style>
      <title>SVG</title>
      <meta charset = "utf-8" />
   </head>
   <body>
      <h2 align = "center">HTML5 SVG Rectangle</h2>
      
      <svg id = "svgelem" height = "200" xmlns = "http://www.w3.org/2000/svg">
         <rect id = "redrect" width = "300" height = "100" fill = "red" />
      </svg>
   </body>
</html>

Nó sẽ cho kết quả sau trong phiên bản mới nhất của Firefox đã kích hoạt HTML5:

HTML5 SVG Rectabgle

HTML5 − Đường thẳng SVG

Sau đây là phiên bản HTML5 của một ví dụ SVG mà sẽ vẽ một đường thẳng bởi sử dụng thẻ :


<!DOCTYPE html>
<html>
   <head>
      
      <style>
         #svgelem {
            position: relative;
            left: 50%;
            -webkit-transform: translateX(-50%);
            -ms-transform: translateX(-50%);
            transform: translateX(-50%);
         }
      </style>
      <title>SVG</title>
      <meta charset = "utf-8" />
   </head>
   
   <body>
      <h2 align = "center">HTML5 SVG Line</h2>
      
      <svg id = "svgelem" height = "200" xmlns = "http://www.w3.org/2000/svg">
         <line x1 = "0" y1 = "0" x2 = "200" y2 = "100" 
            style = "stroke:red;stroke-width:2"/>
      </svg>
   </body>
</html>

Bạn có thể sử dụng thuộc tính style mà cho phép bạn thiết lập thông tin style bổ sung như nét, màu, độ rộng của nét, …

Nó sẽ cho kết quả sau trong phiên bản mới nhất của Firefox đã kích hoạt HTML5:

HTML5 SVG Line

HTML5 − Hình SVG Elip

Sau đây là phiên bản HTML5 của một ví dụ SVG mà sẽ vẽ một Elip bởi sử dụng thẻ tag:



<!DOCTYPE html>

<html>
   <head>
      
      <style>
         #svgelem {
            position: relative;
            left: 50%;
            -webkit-transform: translateX(-40%);
            -ms-transform: translateX(-40%);
            transform: translateX(-40%);
         }
      </style>
      <title>SVG</title>
      <meta charset = "utf-8" />
   </head>
	
   <body>
      <h2 align = "center">HTML5 SVG Ellipse</h2>
      
      <svg id = "svgelem" height = "200" xmlns = "http://www.w3.org/2000/svg">
         <ellipse cx = "100" cy = "50" rx = "100" ry = "50" fill = "red" />
      </svg>
		
   </body>
</html>

Nó sẽ cho kết quả sau trong phiên bản mới nhất của Firefox đã kích hoạt HTML5:

HTML5 SVG Ellipse

HTML5 − Hình đa giác SVG

Sau đây là phiên bản HTML5 của một ví dụ SVG mà sẽ vẽ một đa giác bởi sử dụng thẻ :



<!DOCTYPE html>

<html>
   <head>
   
      <style>
         #svgelem {
            position: relative;
            left: 50%;
            -webkit-transform: translateX(-50%);
            -ms-transform: translateX(-50%);
            transform: translateX(-50%);
         }
      </style>
      <title>SVG</title>
      <meta charset = "utf-8" />
   </head>
	
   <body>
      <h2 align = "center">HTML5 SVG Polygon</h2>
      
      <svg id = "svgelem" height = "200" xmlns = "http://www.w3.org/2000/svg">
         <polygon  points = "20,10 300,20, 170,50" fill = "red" />
      </svg>
   </body>
</html>

Nó sẽ cho kết quả sau trong phiên bản mới nhất của Firefox đã kích hoạt HTML5:

HTML5 SVG Polygon

HTML5 − Hình nhiều mặt (polyline) SVG

Sau đây là phiên bản HTML5 của một ví dụ SVG mà sẽ vẽ một hình nhiều mặt bởi sử dụng thẻ :


<!DOCTYPE html>

<html>
   <head>
      
      <style>
         #svgelem {
            position: relative;
            left: 50%;
            -webkit-transform: translateX(-20%);
            -ms-transform: translateX(-20%);
            transform: translateX(-20%);
         }
      </style>
      <title>SVG</title>
      <meta charset = "utf-8" />
   </head>
	
   <body>
      <h2 align = "center">HTML5 SVG Polyline</h2>
      <svg id = "svgelem" height = "200" xmlns = "http://www.w3.org/2000/svg">
         <polyline points = "0,0 0,20 20,20 20,40 40,40 40,60" fill = "red" />
      </svg>
   </body>
</html>

Nó sẽ cho kết quả sau trong phiên bản mới nhất của Firefox đã kích hoạt HTML5:

HTML5 SVG Polyline

HTML5 − Hình SVG Gradients

Sau đây là phiên bản HTML5 của một ví dụ SVG mà sẽ vẽ một elip bởi sử dụng thẻ và sẽ sử dụng thẻ để định nghĩa một SVG Radial Gradient:

Với cách tương tự, bạn có thể sử dụng thẻ để tạo SVG Linear Gradient:


<!DOCTYPE html>

<html>
   <head>
      
      <style>
         #svgelem {
            position: relative;
            left: 50%;
            -webkit-transform: translateX(-40%);
            -ms-transform: translateX(-40%);
            transform: translateX(-40%);
         }
      </style>
      <title>SVG</title>
      <meta charset = "utf-8" />
   </head>
	
   <body>
      <h2 align = "center">HTML5 SVG Gradient Ellipse</h2>
      
      <svg id = "svgelem" height = "200" xmlns = "http://www.w3.org/2000/svg">
         <defs>
            <radialGradient id="gradient" cx = "50%" cy = "50%" r = "50%" fx = "50%" 
               fy = "50%">
               <stop offset = "0%" style = "stop-color:rgb(200,200,200); stop-opacity:0"/>
               <stop offset = "100%" style = "stop-color:rgb(0,0,255); stop-opacity:1"/>
            </radialGradient>
         </defs>
         <ellipse cx = "100" cy = "50" rx = "100" ry = "50" 
            style = "fill:url(#gradient)" />
      </svg>
		
   </body>
</html>

Nó sẽ cho kết quả sau trong phiên bản mới nhất của Firefox đã kích hoạt HTML5:

HTML5 SVG Polyline

HTML5 − Hình ngôi sao


Live Demo
<html>
   <head>
   
      <style>
         #svgelem {
            position: relative;
            left: 50%;
            -webkit-transform: translateX(-40%);
            -ms-transform: translateX(-40%);
            transform: translateX(-40%);
         }
      </style>
      <title>SVG</title>
      <meta charset = "utf-8" />
   </head>
   
   <body>	
      <h2 align = "center">HTML5 SVG Star</h2>
      
      <svg id = "svgelem" height = "200" xmlns = "http://www.w3.org/2000/svg">
         <polygon points = "100,10 40,180 190,60 10,60 160,180" fill = "red"/>
      </svg>
    </body>
</html>

Nó sẽ cho kết quả sau trong phiên bản mới nhất của Firefox đã kích hoạt HTML5:

HTML5 SVG Polyline
Web Forms 2.0 trong HTML5
MathML trong HTML5

Recent Updates

Sắp Tết 2024 Rồi! - Còn bao nhiêu ngày nữa là đến tết 2024?Cú pháp HTML5 cơ bảnHTML5 là gìTổng hợp các thẻ mới trong HTML5Tổng hợp các thẻ cũ trong HTML5Tổng hợp các thẻ cơ bản trong HTML5Web Worker trong HTML5Drag và Drop trong HTML5Microdata trong HTML5Geolocation trong HTML5Audio và Video trong HTML5Canvas trong HTML5WebSockets trong HTML5

VietTuts on facebook

Học Lập Trình Online Miễn Phí - VietTuts.Vn
Danh Sách Bài Học

Học Java | Hibernate | Spring
Học Excel | Excel VBA
Học Servlet | JSP | Struts2
Học C | C++ | C#
Học Python
Học SQL

Bài Tập Có Lời Giải

Bài tập Java
Bài tập C
Bài tập C++
Bài tập C#
Bài tập Python
Ví dụ Excel VBA

Câu Hỏi Phỏng Vấn

201 câu hỏi phỏng vấn java
25 câu hỏi phỏng vấn servlet
75 câu hỏi phỏng vấn jsp
52 câu hỏi phỏng vấn Hibernate
70 câu hỏi phỏng vấn Spring
57 câu hỏi phỏng vấn SQL

Scroll back to top

Copyright © 2016 VietTuts.Vn all rights reserved. | Liên hệ | Chính sách - riêng tư | sitemap.html | sitemap_index.xml