極客書

HTML5 - SVG

SVG代表可縮放圖形，它是一種用XML描述二維圖形和圖形應用的語言，然後由SVG查看器呈現XML。

SVG主要用於矢量類型圖，如餅圖、X、Y坐標系中的二維圖等。

SVG成爲W3C的第14條建議。2003年1月，您可以在SVG規範中查看最新版本。

Viewing SVG Files

大多數web瀏覽器可以顯示SVG，就像它們可以顯示PNG、GIF和JPG一樣。Internet Explorer用戶可能必須安裝adobe svg查看器才能在瀏覽器中查看svg。

Embedding SVG in HTML5

HTML5允許直接使用<SVG>..<SVG>標記嵌入SVG，該標記具有以下簡單語法&減號;

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

Firefox 3.7還引入了一個配置選項（「about:config」），您可以使用以下步驟啓用HTML5−

  • 在Firefox地址欄中鍵入about:config。

  • 點擊「我會小心的，我保證！」出現的警告消息上的按鈕（並確保您遵守它！）。

  • 在頁面頂部的篩選器欄中鍵入html5.enable。

  • 當前它將被禁用，因此單擊它將值切換爲true。

現在，您的Firefox HTML5解析器應該已經啓用，您應該能夠使用以下示例進行實驗。

HTML5 − SVG Circle

下面是一個SVG示例的HTML5版本，它將使用<circle>tag−繪製一個圓;

Live Demo 
<!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>

這將在啓用HTML5的最新版本的Firefox中產生以下結果。

HTML5 − SVG Rectangle

下面是一個SVG示例的HTML5版本，它將使用<rect>tag−繪製一個矩形;

Live Demo 
<!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>

這將在啓用HTML5的最新版本的Firefox中產生以下結果。

HTML5 − SVG Line

下面是一個SVG示例的HTML5版本，它將使用<line>tag−繪製一條線;

Live Demo 
<!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>

您可以使用樣式屬性，該屬性允許您設置其他樣式信息，如筆劃和填充顏色、筆劃寬度等。

這將在啓用HTML5的最新版本的Firefox中產生以下結果。

HTML5 − SVG Ellipse

下面是一個SVG示例的HTML5版本，它將使用<eliple>tag−繪製一個橢圓;

Live Demo 
<!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>

這將在啓用HTML5的最新版本的Firefox中產生以下結果。

HTML5 − SVG Polygon

下面是一個SVG示例的HTML5版本，它將使用<polygon>tag−繪製多邊形;

Live Demo 
<!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>

這將在啓用HTML5的最新版本的Firefox中產生以下結果。

HTML5 − SVG Polyline

下面是一個SVG示例的HTML5版本，它將使用<polyline>tag−繪製多段線;

Live Demo 
<!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>

這將在啓用HTML5的最新版本的Firefox中產生以下結果。

HTML5 − SVG Gradients

下面是一個SVG示例的HTML5版本，它將使用<elliple>標記繪製橢圓，並使用<radial gradient>標記定義SVG徑向漸變。

類似地，可以使用<linear gradient>標記創建SVG線性漸變。

Live Demo 
<!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>

這將在啓用HTML5的最新版本的Firefox中產生以下結果。

HTML5 − SVG Star

下面是一個SVG示例的HTML5版本，它將使用<polygon>標記繪製一個星形。

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>

這將在啓用HTML5的最新版本的Firefox中產生以下結果。