DIV CSS 佈局教程網

設為首頁 加入收藏
 DIV+CSS佈局教程網 >> 網頁腳本 >> HTML基礎知識 >> HTML5詳解 >> 使用HTML5進行SVG矢量圖形繪制的入門教程
使用HTML5進行SVG矢量圖形繪制的入門教程
編輯：HTML5詳解     

VG 表示可伸縮矢量圖形，這是一門用於描述 2D 圖形的語言，圖形應用使用 XML 編寫，然後 XML 由 SVG 閱讀器程序呈現。

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

SVG 在 2003 年 1 月 14 日成為 W3C 推薦標准，你可以在 SVG 規范 頁面中查看最新版本的 SVG 規范。

查看 SVG 文件
大多數 Web 浏覽器都可以顯示 SVG，就像它們可以顯示 PNG，GIF 以及 JPG 圖形。IE 用戶可能需要安裝 Adobe SVG 閱讀器 以便能夠在浏覽器中查看 SVG。

在 Html5 中嵌入 SVG
Html5 允許我們直接使用 __<svg>...</svg> 標簽嵌入 SVG，下面是簡單的語法：

XML/Html Code復制內容到剪貼板
  1. <svg XMLns="http://www.w3.org/2000/svg">  
  2. ...       
  3. </svg>  

Html5 - SVG 圓
下面是一個 SVG 示例的 Html5 版本，用 <circle> 標簽繪制一個圓：

XML/Html Code復制內容到剪貼板
  1. <!DOCTYPE Html>  
  2. <head>  
  3. <title>SVG</title>  
  4. <meta charset="utf-8" />  
  5. </head>  
  6. <body>  
  7. <h2>Html5 SVG Circle</h2>  
  8. <svg id="svgelem" height="200" XMLns="http://www.w3.org/2000/svg">  
  9.     <circle id="redcircle" cx="50" cy="50" r="50" fill="red" />  
  10. </svg>  
  11. </body>  
  12. </Html>  

在啟用 Html5 的最新版 Firefox 中會生成如下結果：
2016219112130340.jpg (223×186)


Html5 - SVG 矩形
下面是一個 SVG 示例的 Html5 版本，用 <rect> 標簽繪制一個矩形：

XML/Html Code復制內容到剪貼板
  1. <!DOCTYPE Html>  
  2. <head>  
  3. <title>SVG</title>  
  4. <meta charset="utf-8" />  
  5. </head>  
  6. <body>  
  7. <h2>Html5 SVG Rectangle</h2>  
  8. <svg id="svgelem" height="200" XMLns="http://www.w3.org/2000/svg">  
  9.     <rect id="redrect" width="300" height="100" fill="red" />  
  10. </svg>  
  11. </body>  
  12. </Html>  

在啟用 Html5 的最新版 Firefox 中會生成如下結果：
2016219112200272.jpg (316×152)


Html5 - SVG 線條
下面是一個 SVG 示例的 Html5 版本，用 <line> 標簽繪制一個線條：

XML/Html Code復制內容到剪貼板
  1. <!DOCTYPE Html>  
  2. <head>  
  3. <title>SVG</title>  
  4. <meta charset="utf-8" />  
  5. </head>  
  6. <body>  
  7. <h2>Html5 SVG Line</h2>  
  8. <svg id="svgelem" height="200" XMLns="http://www.w3.org/2000/svg">  
  9.     <line x1="0" y1="0" x2="200" y2="100"  
  10.           style="stroke:red;stroke-width:2"/>  
  11. </svg>  
  12. </body>  
  13. </Html>  

你可以使用 style 屬性給它設置額外的樣式信息，比如筆畫，填充色，筆畫寬度等等。

在啟用 Html5 的最新版 Firefox 中會生成如下結果：
2016219112220725.jpg (217×159)


Html5 - SVG 橢圓
下面是一個 SVG 示例的 Html5 版本，用 <ellipse> 標簽繪制一個橢圓：

XML/Html Code復制內容到剪貼板
  1. <!DOCTYPE Html>  
  2. <head>  
  3. <title>SVG</title>  
  4. <meta charset="utf-8" />  
  5. </head>  
  6. <body>  
  7. <h2>Html5 SVG Ellipse</h2>  
  8. <svg id="svgelem" height="200" XMLns="http://www.w3.org/2000/svg">  
  9.     <ellipse cx="100" cy="50" rx="100" ry="50" fill="red" />  
  10. </svg>  
  11. </body>  
  12. </Html>  

在啟用 Html5 的最新版 Firefox 中會生成如下結果：
2016219112240763.jpg (225×148)


Html5 - SVG 多邊形
下面是一個 SVG 示例的 Html5 版本，用 <polygon> 標簽繪制一個多邊形：

XML/Html Code復制內容到剪貼板
  1. <!DOCTYPE Html>  
  2. <head>  
  3. <title>SVG</title>  
  4. <meta charset="utf-8" />  
  5. </head>  
  6. <body>  
  7. <h2>Html5 SVG Polygon</h2>  
  8. <svg id="svgelem" height="200" XMLns="http://www.w3.org/2000/svg">  
  9.     <polygon  points="20,10 300,20, 170,50" fill="red" />  
  10. </svg>  
  11. </body>  
  12. </Html>  

在啟用 Html5 的最新版 Firefox 中會生成如下結果：
2016219112258796.jpg (310×118)


Html5 - SVG 折線
下面是一個 SVG 示例的 Html5 版本，用 <polyline> 標簽繪制一個折線圖：

XML/Html Code復制內容到剪貼板
  1. <!DOCTYPE Html>  
  2. <head>  
  3. <title>SVG</title>  
  4. <meta charset="utf-8" />  
  5. </head>  
  6. <body>  
  7. <h2>Html5 SVG Polyline</h2>  
  8. <svg id="svgelem" height="200" XMLns="http://www.w3.org/2000/svg">  
  9.  <polyline points="0,0 0,20 20,20 20,40 40,40 40,60" fill="red" />  
  10. </svg>  
  11. </body>  
  12. </Html>  

在啟用 Html5 的最新版 Firefox 中會生成如下結果：
2016219112318049.jpg (245×114)


Html5 - SVG 漸變
下面是一個 SVG 示例的 Html5 版本，用 <ellipse> 標簽繪制一個橢圓，使用 <radialGradIEnt> 標簽定義一個 SVG 徑向漸變。

我們可以以類似的方式用 <linearGradIEnt> 標簽創建 SVG 線性漸變。

XML/Html Code復制內容到剪貼板
  1. <!DOCTYPE Html>  
  2. <head>  
  3. <title>SVG</title>  
  4. <meta charset="utf-8" />  
  5. </head>  
  6. <body>  
  7. <h2>Html5 SVG GradIEnt Ellipse</h2>  
  8. <svg id="svgelem" height="200" XMLns="http://www.w3.org/2000/svg">  
  9.    <defs>  
  10.       <radialGradIEnt id="gradIEnt" cx="50%" cy="50%" r="50%"  
  11.       fx="50%" fy="50%">  
  12.       <stop offset="0%" style="stop-color:rgb(200,200,200);   
  13.       stop-opacity:0"/>  
  14.       <stop offset="100%" style="stop-color:rgb(0,0,255);   
  15.       stop-opacity:1"/>  
  16.       </radialGradIEnt>  
  17.    </defs>  
  18.    <ellipse cx="100" cy="50" rx="100" ry="50"    
  19.       style="fill:url(#gradIEnt)" />  
  20. </svg>  
  21. </body>  
  22. </Html>  

在啟用 Html5 的最新版 Firefox 中會生成如下結果：
2016219112338977.jpg (319×157)

HTML5詳解
HTML5 transform三維立方體實現360無死角三維旋轉效果
使用Html5 transform完成三維立方體的模型，可以實現360無死角的三維旋轉效果，美中不
HTML5特性的檢測：Local Storage
Local Storage (本地存儲)Html5 storage提供了一種方式讓網站能夠把信息存
分享全球十款超強HTML5開發工具
最近，看到有人在HTML5論壇問到，目前全球有哪些比較優秀的HTML5開發軟件。筆者根據自己對Ht

相關文章

HTML入門知識HTML5教程關於HTMLHTML和XhtmlHTML5特效代碼HTML5詳解
小編推薦
Dropbox 做私有 Git 服務器 HTML5 Canvas實現圖片縮放、翻轉、顏色漸變的代碼示例 Hello World: 第一個Mugeda動畫 關於HTML5的22個初級技巧(圖文教程) 《精通HTML5編程》第二：Canvas畫布 HTML5 Video/Audio播放本地文件示例介紹 《精通HTML5編程》第三章：介紹Audio和Video標簽 CSS3 濾鏡 移動開發框架 html5的新玩法——語音搜索
熱門推薦
HTML5 video 視頻標簽使用介紹 html5如何及時更新緩存文件(js、css或圖片) html5使用canvas繪制太陽系效果 html5 Canvas畫圖教程(3)—canvas出現1像素線條模糊不清的原因 HTML5之SVG 2D入門10—濾鏡的定義及使用 淺談利用緩存來優化HTML5 Canvas程序的性能 針對HTML5的Web Worker使用攻略 常用mac軟件推薦 使用HTML5進行SVG矢量圖形繪制的入門教程
大家都在看
JavaScript寫作技巧,函數A中調用函數B, 怎樣在函數B中寫代碼中斷函數A的運行? 網頁設計高級布局40例參考 自己編寫的支持Ajax驗證的JS表單驗證插件 基於jQuery的js分頁代碼 hresume基本架構對應格式 JavaScript中數據結構與算法(三)：鏈表 CSS Sprite圖片處理技巧 JS判斷網頁是否在iframe或frame中
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved