定點陣圖形

發行項
05/12/2022

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

注意

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

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

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

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

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

本主題內容：

static
relative
absolute
z-index
旋轉
flip
總結

static

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

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

shape1-ps.gif (2123 bytes)

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

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>

絕對

將位置樣式屬性設定為「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>

圖層索引

可以放置與另一個圖案重迭的圖形。一般而言，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>

旋轉

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

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

flip

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

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

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

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

總結

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

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