在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 教程/ HTML/ HTML5 SVG 教程
HTML5 Web 存儲
HTML5 Web SQL 數(shù)據(jù)庫
HTML5 字符編碼
HTML5 URL 編碼
HTML5 Modernizr
HTML5 快速指南
HTML5 畫布
HTML5 語法
HTML5 顏色代碼生成器
HTML5 音頻和視頻
HTML5 微數(shù)據(jù)
HTML5 標簽參考
HTML5 在線編輯器
HTML5 表單 2.0
HTML5 概述
HTML5 SVG 教程
HTML5 驗證
有用的 HTML5 資源
HTML5 字體參考
HTML5 屬性
HTML5 新標簽（元素）
HTML5 地理定位
HTML5 拖放
HTML5 字符實體參考
HTML5 Web Workers
HTML5 過時標簽和屬性
HTML5 顏色名稱
HTML5 WebSockets 教程
HTML5 服務器推送事件
HTML5 事件
HTML5 MathML 教程

HTML5 SVG 教程

SVG 表示可伸縮矢量圖形，這是一門用于描述 2D 圖形的語言，圖形應用使用 XML 編寫，然后 XML 由 SVG 閱讀器程序呈現(xiàn)。

SVG 主要用于矢量類型的圖表，比如餅圖，X，Y 坐標系統(tǒng)中的二維圖等等。

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

查看 SVG 文件

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

在 HTML5 中嵌入 SVG

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

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

FireFox 3.7 還引入了一個配置選項（"about:config"），可以通過下列步驟啟用 HTML5：

  1. 在 FireFox 地址欄中輸入 about:config。
  2. 在出現(xiàn)警告消息的地方點擊 “I'll be careful, I promise!” 按鈕（確保遵守它）。
  3. 在頁面頂部的過濾器中輸入 html5.enable。
  4. 默認可能被禁用了，因此要點擊它切換它的值為 true。

現(xiàn)在，F(xiàn)ireFox HTML5 解析器應該啟用了，然后可以實驗下面的例子。

HTML5 - SVG 圓

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

<!DOCTYPE html>
<head>
<title>SVG</title>
<meta charset="utf-8" />
</head>
<body>
<h2>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 中會生成如下結果：

http://wiki.jikexueyuan.com/project/html5/images/svg_circle.jpg" alt="HTML5 SVG Circle" />

便于學習這一概念 - 請使用 FireFox 3.7 或更高的版本進行在線練習。

HTML5 - SVG 矩形

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

<!DOCTYPE html>
<head>
<title>SVG</title>
<meta charset="utf-8" />
</head>
<body>
<h2>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 中會生成如下結果：

http://wiki.jikexueyuan.com/project/html5/images/svg_rect.jpg" alt="HTML5 SVG Rectangle" />

便于學習這一概念 - 請使用 FireFox 3.7 或更高的版本進行在線練習。

HTML5 - SVG 線條

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

<!DOCTYPE html>
<head>
<title>SVG</title>
<meta charset="utf-8" />
</head>
<body>
<h2>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>

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

在啟用 HTML5 的最新版 FireFox 中會生成如下結果：

http://wiki.jikexueyuan.com/project/html5/images/svg_line.jpg" alt="HTML5 SVG Line" />

便于學習這一概念 - 請使用 FireFox 3.7 或更高的版本進行在線練習。

HTML5 - SVG 橢圓

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

<!DOCTYPE html>
<head>
<title>SVG</title>
<meta charset="utf-8" />
</head>
<body>
<h2>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 中會生成如下結果：

http://wiki.jikexueyuan.com/project/html5/images/svg_ellipse.jpg" alt="HTML5 SVG Ellipse" />

便于學習這一概念 - 請使用 FireFox 3.7 或更高的版本進行在線練習。

HTML5 - SVG 多邊形

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

<!DOCTYPE html>
<head>
<title>SVG</title>
<meta charset="utf-8" />
</head>
<body>
<h2>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 中會生成如下結果：

http://wiki.jikexueyuan.com/project/html5/images/svg_polygon.jpg" alt="HTML5 SVG Polygon" />

便于學習這一概念 - 請使用 FireFox 3.7 或更高的版本進行在線練習。

HTML5 - SVG 折線

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

<!DOCTYPE html>
<head>
<title>SVG</title>
<meta charset="utf-8" />
</head>
<body>
<h2>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 中會生成如下結果：

http://wiki.jikexueyuan.com/project/html5/images/svg_polyline.jpg" alt="HTML5 SVG Polyline" />

便于學習這一概念 - 請使用 FireFox 3.7 或更高的版本進行在線練習。

HTML5 - SVG 漸變

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

我們可以以類似的方式用 <linearGradient> 標簽創(chuàng)建 SVG 線性漸變。

<!DOCTYPE html>
<head>
<title>SVG</title>
<meta charset="utf-8" />
</head>
<body>
<h2>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 中會生成如下結果：

http://wiki.jikexueyuan.com/project/html5/images/svg_gradient_ellipse.jpg" alt="HTML5 SVG Gradient Ellipse" />

便于學習這一概念 - 請使用 FireFox 3.7 或更高的版本進行在線練習。

上一篇：HTML5 語法下一篇：HTML5 畫布