學習地址: http://www.w3school.com.cn/svg/svg_rect.asp
api: http://pilat.free.fr/english/routines/js_dom.htm
簡介:
SVG 是使用 XML 來描述二維圖形和繪圖程序的語言
於 2003 年 1 月 14 日成爲 W3C 推薦標準
IE8以下不支持,需要安裝插件(Adobe SVG Viewer)。IE9貌似支持了
學習之前，你應該對以下內容有基本的瞭解：
HTML
XML 基礎
SVG 實例:
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- 注意上面 standalone 屬性,該屬性規定此 SVG 文件是否是“獨立的”，或含有對外部文件的引用。
standalone="no" 意味着 SVG 文檔會引用一個外部文件 - 在這裏，是 DTD 文件。
下面引用了這個外部的 SVG DTD。該 DTD 位於 “http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd”。
該 DTD 位於 W3C，含有所有允許的 SVG 元素。其實這裏把 standalone 設爲 yes 也行，就可以省略下面的外部引用。 -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<!-- SVG 代碼以 <svg> 元素開始，包括開啓標籤 <svg> 和關閉標籤 </svg> 。這是根元素。
width 和 height 屬性可設置此 SVG 文檔的寬度和高度,可以設數值或者百分比。
version 屬性可定義所使用的 SVG 版本，xmlns 屬性可定義 SVG 命名空間。-->
<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
<!-- <rect> 標籤可用來創建矩形，以及矩形的變種。 width 和 height 屬性可定義矩形的高度和寬度。
style 屬性用來定義 CSS 屬性：
fill 屬性定義矩形的填充顏色(rgb 值、顏色名或者十六進制值),
stroke-width 屬性定義矩形邊框的寬度, stroke 屬性定義矩形邊框的顏色 -->
<rect width="300" height="100" style="fill:rgb(0,0,255);stroke-width:1; stroke:rgb(0,0,0)"/>
<!-- x 屬性定義矩形的左側位置(例如，x="5" 定義矩形到瀏覽器窗口左側的距離是 5px),
y 屬性定義矩形的頂端位置(例如，y="8" 定義矩形到瀏覽器窗口頂端的距離是 8px),
style 屬性裏面的：
fill-opacity 屬性定義填充顏色透明度(合法的範圍是：0 - 1),
stroke-opacity 屬性定義筆觸顏色的透明度(合法的範圍是：0 - 1),
opacity 屬性定義整個元素的透明值（合法的範圍是：0 - 1）-->
<rect x="20" y="20" width="250" height="250" style="fill:blue;stroke:pink;stroke-width:5; fill-opacity:0.1;stroke-opacity:0.9"/>
<!-- <circle> 用來創建一個圓。 cx 和 cy 屬性定義圓心的 x 和 y 座標。如果忽略這兩個屬性，那麼圓點會被設置爲 (0, 0)。r 屬性定義圓的半徑。
stroke 和 stroke-width 屬性控制顯示的輪廓。這裏把圓的輪廓設置爲 2px 寬，黑邊框。
fill 屬性設置形狀內的顏色。我們把填充顏色設置爲紅色。
stroke 、stroke-width 和 fill 這些樣式屬性,可以寫在 style 裏面,也可以像這樣單獨寫出來 -->
<circle cx="100" cy="250" r="40" stroke="black" stroke-width="2" fill="red"/>
<text style="fill-opacity: 1;" text-anchor="start" dy=".35em" x="10" y='50'>天涯論壇</text>
</svg>
嵌入 HTML 文檔：
SVG 文件可通過以下標籤嵌入 HTML 文檔：
<embed>、<object> 或者 <iframe>。
1.使用 <embed> 標籤
<embed> 標籤被所有主流的瀏覽器支持，並允許使用腳本。
當在 HTML 頁面中嵌入 SVG 時使用 <embed> 標籤是 Adobe SVG Viewer 推薦的方法！
然而，如果需要創建合法的 XHTML，就不能使用 <embed>。任何 HTML 規範中都沒有 <embed> 標籤。
示例：
<embed src="rect.svg" width="300" height="100" type="image/svg+xml"
pluginspage="http://www.adobe.com/svg/viewer/install/" />
注：pluginspage 屬性指向下載插件的 URL。
2.使用 <object> 標籤
<object> 標籤是 HTML 4 的標準標籤，被所有較新的瀏覽器支持。它的缺點是不允許使用腳本。
假如您安裝了最新版本的 Adobe SVG Viewer，那麼當使用 <object> 標籤時 SVG 文件無法工作(至少不能在 IE 中工作)！
示例：
<object data="rect.svg" width="300" height="100" type="image/svg+xml"
codebase="http://www.adobe.com/svg/viewer/install/" />
注：codebase 屬性指向下載插件的 URL。
3.使用 <iframe> 標籤
<iframe> 標籤可工作在大部分的瀏覽器中。
示例：
<iframe src="rect.svg" width="300" height="100"></iframe>
SVG 預定義的形狀元素：
線 <line>
矩形 <rect>
圓形 <circle>
橢圓 <ellipse>
折線 <polyline>
多邊形 <polygon>
路徑 <path>
文本 <text>
樣式屬性,所有形狀元素都會有
style 屬性用來定義 CSS 屬性
fill 屬性定義矩形的填充顏色(rgb 值、顏色名或者十六進制值)
矩形 <rect> 的屬性:
width 和 height 屬性可定義矩形的高度和寬度