使用預先定義的圖形

本主題描述 VML，這是從 Windows Internet Explorer 9 起已被取代的功能。 依賴 VML 的網頁和應用程式應該移轉至 SVG 或其他廣受支持的標準。

注意

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

 

如您所瞭解，您可以使用 VML 的 <oval> 元素來建立簡單的橢圓形。 VML 提供數個其他預先定義的元素。 在本主題中，我們將說明如何使用這些元素繪製圖形。

在本主題中：

• 矩形
• 圓角矩形
• 行
• 多段線
• 曲線
• 弧線
• 摘要

矩形

您可以使用 <rect> 項目來繪製矩形。 然後，您可以藉由指定不同的屬性來自訂矩形。

例如，您可以藉由指定 填滿色彩=“blue”來繪製填滿藍色的矩形，並藉由指定 筆劃色彩=“red” 筆劃重量=“3.5pt” 來為它指定 3.5 點紅色外框，如下列 VML 表示法所示：

<v:rect style='width:100pt;height:75pt' fillcolor="blue"
strokecolor="red" strokeweight="3.5pt"/>

如需這個項目的詳細資訊，請參閱 VML 規格 。 （注意：VML 規格沒有 <rect> 元素的書籤。

回到頂端

roundrect

您可以使用 <roundrect> 元素來繪製圓角的矩形。 然後，您可以藉由指定不同的屬性來自定義圓角矩形。

例如，您可以藉由指定 弧形=“0.3”，繪製圓角為 30% 矩形較小維度的矩形。 藉由指定 fillcolor=“yellow”，並指定 strokecolor=“red” strokeweight=“2pt”，為它指定 2 點紅色外框，如下 VML 表示法所示：

<v:roundrect style='width:100pt;height:75pt"
arcsize="0.3" fillcolor="yellow"
strokecolor="red" strokeweight="2pt"/>

如需這個項目的詳細資訊，請參閱 VML 規格 。

回到頂端

線

您可以使用 <line> 元素來建立直線。 接著，您可以指定不同的屬性來自定義這一行。

例如，您可以指定 從=“20pt，20pt” =“100pt，20pt”來繪製水平線，並藉由指定 strokecolor=“red” strokeweight=“2pt”，使其成為 2 點和紅色，如下列 VML 表示法所示：

<v:line from="20pt,20pt" to="100pt,20pt" '
strokecolor="red" strokeweight="2pt">

您可以藉由為 、 和 到 屬性指定不同的值，來繪製垂直或對角線，如下列 VML 表示法所示：

<v:line from="20pt,20pt" to="20pt,100pt"
strokecolor="red" strokeweight="2pt">

如需這個項目的詳細資訊，請參閱 VML 規格 。

回到頂端

聚合線條

您可以使用 <polyline> 元素來定義從連接線段建立的圖形。 然後，您可以透過指定不同的屬性來自定義圖形。

例如，若要繪製下圖所示的圖形，您可以輸入下列 VML 表示法：

<v:polyline points="18pt,54pt,90pt,-9pt,180pt,63pt,261pt,27pt"
strokecolor="red" strokeweight="2pt"/>

如需這個項目的詳細資訊，請參閱 VML 規格 。

回到頂端

曲線

您可以使用 <curve> 元素來繪製立方貝塞爾曲線。 接著，您可以指定不同的屬性來自定義曲線。

例如，若要繪製如下圖所示的曲線，您可以輸入下列 VML 表示法：

<v:curve style='position:relative'
from="0,0" control1="100pt,100pt" control2="200pt,100pt"
to="300pt,0" strokecolor="red" strokeweight="3pt"/>

如需這個項目的詳細資訊，請參閱 VML 規格 。

回到頂端

弧

您可以使用 <arc> 項目繪制定義為橢圓線段的弧線。 弧線是由橢圓形的交集所定義，其開頭和結尾半徑向量是由角度所指定。 角度是使用圓形的屬性來計算（寬度等於高度），然後以非正向性縮放至所需的寬度和高度。

例如，您可以藉由指定 startangle=“0” endangle=“90”來繪製以 0 度為開頭的弧線，如下列 VML 表示法所示：

<v:arc style='width:100pt;height:100pt'
startangle="0" endangle="90"
strokecolor="red" strokeweight="2pt"/>

您可以藉由指定不同的 startangle 和 endangle 值來變更弧線，如下列 VML 表示法所示：

<v:arc style='width:100pt;height:100pt'
startangle="0" endangle="180"
strokecolor="red" strokeweight="2pt"/>

<v:arc style='width:100pt;height:100pt'
startangle="0" endangle="270"
strokecolor="red" strokeweight="2pt"/>

如需這個項目的詳細資訊，請參閱 VML 規格 。

回到頂端

總結

您可以使用 VML 預先定義的元素，例如 <oval>、<line>、<polyline>、<curve>、<rect>、<roundrect>和 <arc>，輕鬆地在網頁上繪製圖形，然後只要變更其屬性屬性即可自定義這些圖形。