このトピックでは、Windows Internet Explorer 9 の時点で非推奨になった機能である VML について説明します。 VML に依存する Web ページとアプリケーションは、SVG またはその他の広くサポートされている規格に移行する必要があります。
Note
2011 年 12 月の時点で、このトピックはアーカイブされています。 その結果、これはアクティブに維持されなくなります。 詳細については、「アーカイブ済みコンテンツ」を参照してください。 Windows Internet Explorer の現行バージョンに関する情報、推奨事項、ガイダンスの詳細については、「Internet Explorer デベロッパー センター」を参照してください。
説明したように、幅と高さのスタイル属性を指定して、レンダリングされる図形またはグループの内容の包含ボックスのサイズを定義できます。 このトピックでは、ローカル座標空間とは何か、またそれを VML で使用して図形をスケーリングする方法について説明します。
方眼紙に 1 インチ * 2 インチの長方形を描くよう言われたら、まず最初に考えるのはどこから描き始めるか (原点) でしょう。 次に、1 インチを方眼紙のマスにマッピングする方法 (座標) を考えます。
同様に、Web ページ上の包含ボックス内に図形またはグループの内容をレンダリングする場合は、原点と座標を定義する必要があります。 VML には、各図形またはグループが独自の原点と座標を定義できるように、ローカル座標空間が用意されています。 座標空間を指定しない場合は、既定の空間が使用されます。 既定では、原点は、包含ボックスの左上隅から開始されます。
たとえば、以下に示す赤い楕円の VML 表現では、coordsize プロパティ属性と coordorigin プロパティ属性は指定されません。 そのため、既定のローカル座標空間が使用されます。 楕円のサイズは、100 ポイント (幅) * 75 ポイント (高さ) です。 「図形のスケーリング」トピックで説明したように、別の幅または高さを指定することで、楕円のサイズを変更できます。
<v:oval style='width:100pt;height:75pt' fillcolor="red">
</v:oval>
図形がより複雑になった場合、または複数の図形をグループ化してまとめてスケーリングする場合は、VML で提供されるローカル座標空間機能を使用する必要があります。
図形またはグループごとに、coordsize プロパティ属性と coordorigin プロパティ属性を使用して、図形またはグループのローカル座標空間を定義できます。 coordsize 属性は、包含ボックスの幅と高さに沿った単位数を指定します。 coordorigin 属性は、包含ボックスの左上隅にある座標を定義します。 すべての位置関連情報 (幅、高さ、左、上、パスなど) は、ローカル座標空間の単位の観点で表されます。
たとえば、次の VML 表現に示すように、width: 100pt; height: 100pt; は図形の包含ボックスのサイズを 100 ポイント * 100 ポイントに定義します。
<v:shape style='position:relative;left:10pt;top:5pt; width:100pt; height:100pt;'
coordsize="21600,21600" path="m10800,0l0,10800,10800,21600,21600,10800xe"
fillcolor="red" strokecolor="blue" strokeweight="2pt">
</v:shape>
coordsize="21600,21600"は、図形のローカル座標空間のサイズを 21600 単位 * 21600 単位に定義します。 したがって、ローカル座標空間の 1 つの単位は 1/216 ポイントに相当します。path="m10800,0l0,10800,10800,21600,21600,10800xe"は、図形の輪郭をひし形として定義します。 ここまで説明したとおり、すべての位置関連情報 (幅、高さ、左、上、パスなど) は、ローカル座標空間の単位の観点で表されます。 したがって、<path>における 10800 は 10,800 単位を意味し、これは 50 ポイントに相当します。
このひし形のサイズを変更する場合は、別の幅または高さを指定するだけです。<path> の値を変更する必要はありません。 この複雑な図形では、ローカル座標空間機能を使用していない場合は、サイズを変更するたびに <path> のすべての値を変更する必要があります。
たとえば、次の VML 表現に示すように、別の幅または高さを指定するだけで、ひし形をスケーリングできます。
<v:shape style='position:relative;left:10pt;top:5pt;width:200pt; height:200pt;'
coordsize="21600,21600" path="m10800,0l0,10800,10800,21600,21600,10800xe"
fillcolor="red" strokecolor="blue" strokeweight="2pt">
</v:shape>
<group> 要素でローカル座標空間を使用して、グループ内のすべての図形の内容が同じ座標に従ってまとめて拡大縮小されるようにすることもできます。 次に、図形のグループをスケーリングまたは移動する場合は常に、グループの幅と高さ、または coordsize と coordorigin の設定を変更します。
たとえば、次の VML 表現では、<v:group style='... width:200pt;height:200pt;'> はグループの包含ボックスのサイズを 200 ポイント * 200 ポイントに定義します。
<v:group style='position:relative;left:1pt;top:2pt;width:200pt; height:200pt;'
coordsize="1000,1000" coordorigin="-500,-500">
<v:oval style='position:relative;left:0;top:0;width:400;height:300;' fillcolor="red" />
<v:roundrect style='position:relative;left:0;top:0;width:250;height:200;' fillcolor="green" />
</v:group>
coordsize="1000,1000"は、グループのローカル座標空間のサイズを 1000 単位 * 1000 単位に定義します。 したがって、ローカル座標空間の 1 つの単位は 1/5 ポイントに相当します。coordorigin="-500,-500"は、包含ボックスの左上隅を "-500, -500" に定義します。 したがって、包含ボックス内の座標系は、x 軸に沿って -500 から 500、y 軸に沿って -500 から 500 の範囲です。 つまり、包含ボックスの中心は "0, 0" です。<v:oval style='... width:400;height:300;'>は、赤い楕円の包含ボックスのサイズを 400 単位 (幅) * 300 単位 (高さ) に定義します。 ローカル座標空間の 1 つの単位は 1/5 ポイントに相当するため、赤い楕円の包含ボックスのサイズは 80 ポイント (幅) * 60 ポイント (高さ) です。
同様に、緑色の角の丸い長方形の包含ボックスのサイズは、50 ポイント (幅) * 40ポイント (高さ) です。
赤い楕円と緑の角の丸い長方形の両方のサイズを変更する場合は、<v:group style='... width:200pt;height:200pt;'> のみ変更します。 これで、2 つの図形のサイズを個別に変更する必要はありません。
たとえば、次の図に示すように、<v:group style='... width:200pt;height:200pt;'> を <v:group style='... width:300pt;height:300pt;'> に変更すると図形が大きくなります。
また、図形の配置が異なることも示しています。 これは、図形が包含ボックスの中央にある "0, 0" から描画されるためです。 包含ボックスを大きくするため、包含ボックスの中心も移動します。
次の図に示すように、coordorigin="-500,-500" を coordorigin="0,0" に変更すると、赤い楕円と緑の角の丸い長方形の両方が新しい場所にシフトしていることがわかります。 これは、"0, 0" が包含ボックスの左上隅に配置されるためです。
また、包含ボックスはクリッピング領域を確立しないことにも注意してください。 グラフィックスは、包含ボックスの境界の外側に描画できます。 包含ボックスは、ローカル座標空間をページ空間にマップするためだけに機能します。
この要素の詳細については、「VML の仕様」を参照してください。