すぐるホームページ > きしも.com > VMLのまとめ

VMLのまとめ

VMLは,Webページ上で線や円などのベクトル図形を表示するための言語です。
インターネット・エクスプローラでサポートされていて,Googleマップなどで採用されています。
とほほのVML入門で勉強させてもらったVMLの内容を,自分に都合良くまとめました。

テンプレート
<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<style>
v\:* { behavior: url(#default#VML); }
</style>
</head>
<body>
<!--命令をここに入れる-->
</body>
</html>

図形
図形命令属性サンプル文サンプル図形
四角形rectfillcolor(塗りつぶしの色)
strokecolor(線の色)
strokeweight(線の太さ)
<v:rect style="width:30; height:30;" fillcolor="#ffcccc" strokecolor="red" strokeweight="1"></v:rect>
円・楕円ovalfillcolor(塗りつぶしの色)
strokecolor(線の色)
strokeweight(線の太さ)
<v:oval style="width:40; height:30" fillcolor="#ffcccc" strokecolor="red" strokeweight="1"></v:oval>
直線linefillcolor(塗りつぶしの色)
strokecolor(線の色)
strokeweight(線の太さ)
from(始点)
to(終点)
<v:line style="position:relative;" from="0,0" to="100,0" strokecolor="red" strokeweight="2"></v:line>
折れ線polylinefillcolor(塗りつぶしの色)
strokecolor(線の色)
strokeweight(線の太さ)
points(通過点の集合)
<v:polyline style="position:relative;" points="10,0 20,30 30,0 40,30" strokecolor="red" strokeweight="2"></v:polyline>
arcfillcolor(塗りつぶしの色)
strokecolor(線の色)
strokeweight(線の太さ)
startangle(開始角)
endangle(終了角)
<v:arc style="width:100; height:100" startangle="0" endangle="90" strokecolor="red" strokeweight="2"></v:arc>

角度は,画面上方向(12時の方向)を0度とします。
開始角 < 終了角 なら,時計回りに描画します。開始角 > 終了角 なら,反時計回りに描画します。

サブエレメント … たとえば,<v:rect ...>と</v:rect>の間などに入れます。
図形命令属性サンプル文サンプル図形
塗りつぶしfilltype="solid" … 単色で塗りつぶします。
type="gradient" … color と color2 で指定した色でグラデーションします。
<v:rect style="width:30; height:30;"><v:fill type="gradient" color="red" color2="white"></v:fill></v:rect>
線種strokedashstyle="solid|dot|dash|dashdot|longdash|longdashdot|longdashdotdot"
endarrow="none | block | classic | diamond | oval | open | chevron | doublechevron"
<v:line style="position:relative;" from="0,0" to="100,0" strokecolor="red" strokeweight="1"><v:stroke dashstyle="dash" endarrow="classic"></v:stroke></v:line>

きしも.com