定點陣圖形

本主題描述 VML,這是Windows Internet Explorer 9 即將淘汰的功能。 依賴 VML 的網頁和應用程式應該移轉至 SVG 或其他廣泛支援的標準。

注意

自 2011 年 12 月起,本主題已封存。 因此,它不再主動維護。 如需詳細資訊,請參閱 封存內容。 如需有關 Internet Explorer 目前版本Windows的資訊、建議和指引,請參閱Internet Explorer 開發人員中心

 

您已瞭解如何使用 VML 在網頁上繪製和色彩圖形。 在本主題中,您將使用 VML 精確定位網頁上的圖形。

VML 使用CSS2的 Box 模型視覺轉譯模型區段中定義的相同語法,將圖形放置在網頁上。 您可以使用 靜態相對絕對 來判斷基底點位於網頁上的位置。 然後,您可以使用 上方 樣式屬性來指定圖形包含方塊位置的基底點位移。

您也可以使用 z-index 來指定網頁上圖形的 Z 順序。

此外,VML 提供旋轉和翻轉來 旋轉翻轉 圖形。

本主題內容:

static

預設位置樣式是靜態的,它會指示瀏覽器將圖形放在目前點, (文字流程中的基底點) ,並忽略 上方 樣式屬性中的設定。

例如,在下列 VML 標記法中,紅色橢圓會緊接在文字 「圖形開頭:」後面,如下圖所示:

shape1-ps.gif (2123 bytes)

<body>
Beginning of the shape:
<v:oval style='width:80pt;height:90pt' fillcolor="red" />
End.
</body>

back to top 回到頂端

relative

將位置樣式屬性設定為 「relative」 可讓您將包含方塊與目前點的位移放在文字流程中 (基點) 。 位移是由 層和 樣式屬性中的設定所決定。 請注意,在文字流程中定位為相對佔用空間的包含方塊。

例如,在下列 VML 標記法中,紅色橢圓位於左邊 20 點,而頂端相對於文字流程中目前點的 10 點,如下圖所示:

shape3.gif (2048 bytes)

<body>
Beginning of the shape:
<v:oval style='position:relative;left:20pt;top:10pt;width:80pt;
height:90pt;' fillcolor="red" />
End.
</body>

back to top 回到頂端

絕對

將位置樣式屬性設定為 「absolute」 可讓您將包含方塊的確切距離放在其父元素的左上角 (基底點) (包含圖形的位置元素) 。 請注意,定位為絕對的包含方塊不會佔用文字流程中的空間。

例如,在下列 VML 標記法中,紅色橢圓包含在 <body> 元素內 (整個網頁) ;因此,基底點位於網頁的左上角。 橢圓的內含方塊位於左邊的 20 點與頂端的 10 點,相對於網頁左上角的位置,如下圖所示:

shape2.gif (2006 bytes)

<body>
Beginning of the shape:
<v:oval style='position:relative;left:20pt;top:10pt
width:80pt; height:90pt;' fillcolor="red" />
End.
</body>

back to top 回到頂端

圖層索引

可以放置與另一個圖案重迭的圖形。 一般而言,HTML 程式碼中最後列出的圖形會出現在頂端。

在 VML 中,您可以使用 z 索引 樣式屬性來控制 Z 順序。 此屬性的值可以是零、正整數或負整數。 具有較大 z 索引值的圖形會顯示在圖形頂端,其 z 索引值較小。 當這兩個圖形具有相同的 z 索引值時,HTML 程式碼中最後列出的圖形會出現在頂端。

例如,在下列 VML 標記法中,紅色橢圓會顯示在藍色矩形頂端。 這是因為紅色橢圓的 z 索引值大於藍色矩形的 z 索引值。

shape4.gif (572 bytes)

<v:oval
style='position:relative;left:10pt;top:20pt;width:100pt; height:80pt;z-index: 1'
fillcolor="red" />
<v:rect style='position:relative;left:10pt;top:45pt;width:100pt; height:80pt; z-index:0' fillcolor="blue" />

如果您變更 z-index,如下列 VML 標記法所示,紅色橢圓會在藍色矩形後面移動。

shape5.gif (469 bytes)

<v:oval
style='position:relative;left:10pt;top:20pt;width:100pt; height:80pt;z-index:0'
fillcolor="red" />
<v:rect style='position:relative;left:10pt;top:45pt;width:100pt; height:80pt;z-index:1'
fillcolor="blue" />

如果您提供負整數,則可以使用 z 索引將圖形放置在一般文字流程後面,如下列 VML 標記法所示。

shape6.gif (2125 bytes)

<body>
Beginning of the shape:
<v:oval style='position:relative;left:20pt;top:10pt;z-index:-1;
width:80pt;height:90pt;' fillcolor="red" />
End.
</body>

back to top 回到頂端

旋轉

您可以使用 旋轉 樣式屬性來指定圖形開啟其座標軸的度數。 正值表示順時針旋轉;負值表示反順時針旋轉。

例如,如果您指定 style='...rotation:90',您可以順時針旋轉圖形 90 度。

back to top 回到頂端

flip

您可以使用翻轉樣式屬性,根據下表在 x 或 y 軸上 翻轉 圖形:

描述
x 翻轉 y 軸的旋轉圖形, (反 x 座標軸)
y 翻轉 X 軸的旋轉圖形 (反轉 y 座標軸)

 

x 和 y 都可以在 flip 屬性中指定。

例如,如果您輸入 style='...flip:x y',您會在其 x 和 y 軸上翻轉圖形。

back to top 回到頂端

總結

根據您學到的內容,您可以依照下列步驟精確地定位網頁上的圖形:

  1. 決定您希望圖形出現在網頁的位置,以及圖形的大小。
  2. 指定 style='position:relative (或 relative) ' 來判斷基點。
  3. 使用 方和 頂端 來指定基底點的位移。
  4. 使用 寬度高度 來指定圖形包含方塊的大小。
  5. 使用 z-index 來指定圖形的 Z 順序。