VMLのパス描画である線の表示方法に関するサブエレメント<v:stoke>について

<v stroke>サブエレメントは<v:shape><v:shapetype><v:background>など主要エレメントによる図形に詳細なパス線描画を決定する。サブエレメントは主要エレメントの開始タグと終了タグの間に挟む。

<v:group style="width:100; POSITION:ABSOLUTE; height:100; top:0; left:0; rotation:0;" coordsize="100,100" coordorigin="0,0">
<v:shape strokecolor="black" fillcolor="blue" style="width:160; height:160; left:0; top:0; position:absolute; rotation:0;" coordsize="160,160" coordorigin="0 0" path="m 0 0 c 100 0 100 50 0 100 e">
<v:stroke Color="#ffcccc" weight="10pt" Opacity="0.9" linestyle="ThickBetweenThin" dashstyle="dash" endcap="round" joinstyle="round" />
</v:shape>
</v:group>

<v:stroke>サブエレメントの属性を見ていきます。id属性はHTMLエレメントのID属性に同じです。一意的エレメント識別子として使われます。

※ここで使用させていただいている画像はゆみこさん「ひなたぼっこ」からお借りしています。

on weight color opacity linestyle miterlimit joinstyle endcap dashstyle filltype src imagesize startarrow endarrow startarrowwidth endarrowwidth startarrowlength endarrowlength color2 imagealignshape

on・・・線の描画をするかどうか。true/falseまたはt/f。主要エレメントのstroked属性を変更する。

<!--左四角形-->
<v:rect style="width:124; height:99; left:0; top:0; position:absolute; rotation:0;" filled="t" fillcolor="yellow" stroked="f" strokecolor="red" strokeweight="1"><v:stroke on="t" />
</v:rect>
<!--２番目楕円-->
<v:oval style="width:118; height:104; left:134; top:30; position:absolute; rotation:0;" filled="t" fillcolor="yellow" stroked="t" strokecolor="red" strokeweight="1"><v:stroke on="f" />
</v:oval>
<!--３番目シェイプ-->
<v:shape style="position:absolute; width:100; height:100; top:0; left:0; rotation:0;" path=" m 240 16 l 267 102 c 399 105 399 46 240 16" coordsize="100,100" coordorigin="0,0" filled="t" fillcolor="yellow" stroked="t" strokecolor="red" strokeweight="1">
<v:stroke on="false" />
</v:shape>
<!--右シェイプ-->・・・これはnsコマンド有・・・nfコマンドは左右されない。
<v:shape style="position:absolute; width:100; height:100; top:0; left:0; rotation:0;" path=" m 387 25 c 437 55 487 -5 537 25 ns e m 537 25 c 531 68 488 95 462 99 c 498 51 393 74 387 25 e" coordsize="100,100" coordorigin="0,0" filled="t" fillcolor="yellow" stroked="f" strokecolor="red" strokeweight="1">
<v:stroke on="true" />
</v:shape>

<!--左四角形-->
<v:stroke weight="5" on="t" />・・・５(ポイント)省略時はptか？

<!--２番目楕円-->
<v:stroke weight="5px" on="t" />・・・５ピクセル

<!--３番目シェイプ-->
<v:stroke weight="5pt" on="t" />・・・５ポイント

<!--右シェイプ-->・・・これはnsコマンド有・・・nfコマンドは左右されない。
<v:stroke weight="1mm" on="t" />・・・１ミリ

<!--左四角形-->
<v:stroke color="blue" on="t" />

<!--２番目楕円-->
<v:stroke color="rgb(0,255,255)" on="t" />・・・rgb(RGB)指定もOK。

<!--３番目シェイプ-->
<v:stroke eolor="rgb(100%,0%,100%)" on="t" />・・・これはうまくいかない。

<--右シェイプ-->・・・これはnsコマンド有・・・nfコマンドは左右されない。
<v:stroke color="#ffaaaa" on="t" />・・・rgb各色8BITの16進数もOK。4BITはだめである。×color="#faa"

opacity・・・線の描画不透明度。%または小数値。初期値は1.0

<!--左四角形-->
<v:stroke color="blue" opacity="1.0" on="t" />

<!--２番目楕円-->
<v:stroke color="rgb(0,255,255)" opacity="0.5" on="t" />・・・rgb(RGB)指定もOK。

<!--３番目シェイプ-->
<v:stroke color="blue" opacity="50%" on="t" />

<--右シェイプ-->・・・これはnsコマンド有・・・nfコマンドは左右されない。
<v:stroke color="#ffaaaa" opacity="20%" on="t" />

 opacity="0.5" （strokecolor="black"） color2="red"

linestyle・・・W3Cノートではstyleとなっているようで、MSDNではlinestyle。線のスタイル。とるべき値はSingle(default),ThinThin,ThinThick,ThickThin,ThickBetweenThinの５つ。 
thin・・・薄い、thick・・・厚い。

linestyle="single"一本線

linestyle="thinthin"細い線-細い線

linestyle="thinthick"外側=細い線-内側=太い線

linestyle="thickthin"外側=太い線-内側=細い線

linestyle="ThickBetweenThin"細い線の間に太い線

赤い線は同じ図形を重ねてシェイプのパスがわかるようにしています。

<v:stroke color="blue" opacity="0.5" miterlimit="1.0" joinstyle="miter" linestyle="single" weight="20pt" />

<v:stroke color="blue" opacity="0.5" miterlimit="2.0" joinstyle="miter" linestyle="single" weight="20pt" />
線の太さの2倍以上ではない厚みの連結点は鋭利なままである。

<v:stroke color="blue" opacity="0.5" miterlimit="3.0" joinstyle="miter" linestyle="single" weight="20pt" />
線の太さの3倍以上ではない厚みの連結点は鋭利なままである。

<v:stroke color="blue" opacity="0.5" miterlimit="8.0" joinstyle="miter" linestyle="single" weight="20pt" />
線の太さの8倍以上ではない厚みの連結点は鋭利なままである。---これがデフォルト

<v:stroke color="blue" opacity="0.5" miterlimit="4.5." joinstyle="miter" linestyle="single" weight="20pt" />
線の太さの4.5倍以上ではない厚みの連結点は鋭利なままである。

<v:stroke color="blue" opacity="0.5" miterlimit="1.0" joinstyle="round" linestyle="single" weight="20pt" />
miterlimit="1.0"、joinstyle="round"で丸め込みにした。反映しません。

<v:stroke color="blue" opacity="0.5" miterlimit="1.0" joinstyle="bevel" linestyle="single" weight="20pt" />
miterlimit="1.0"、joinstyle="bevel"で刈り取りにした。反映しません。

<v:stroke color="blue" opacity="0.5" miterlimit="1.0" joinstyle="miter" linestyle="thinthin" weight="20pt" />
ラインスタイルを変えてみた。

<v:stroke color="blue" opacity="0.5" miterlimit="1.0" joinstyle="miter" linestyle="thinthiｃｋ" weight="20pt" />
ラインスタイルを変えてみた。

<v:stroke color="blue" opacity="0.5" miterlimit="1.0" joinstyle="miter" linestyle="thiｃｋbetweenthin" weight="20pt" />
ラインスタイルを変えてみた。

<v:stroke color="blue" joinstyle="miter" linestyle="thiｃｋbetweenthin" weight="20pt" />

<v:stroke color="blue" joinstyle="round" linestyle="thiｃｋbetweenthin" weight="20pt" />

<v:stroke color="blue" joinstyle="bevel" linestyle="thiｃｋbetweenthin" weight="20pt" />

endcap・・・ストロークの終了のキャップ・スタイルを定義します。round-丸め、flat(default)-平坦、square(四角)。
VML W3C翻訳ではデフォルトがroundとありますが、間違いです。

<v:stroke color="blue" endcap="flat" linestyle="single" weight="20pt" />

<v:stroke color="blue" endcap="round" linestyle="single" weight="20pt" />

<v:stroke color="blue" endcap="square" linestyle="single" weight="20pt" />

dashstyle・・・linestyleとは違い、破線の描画スタイルを設定する。予め決められたパターンと、ユーザーが定義してパターンを指定するものがある。可能な限りオペレーションシステムが始めから用意しているものを使用することが望ましい。

MSDN翻訳文を参考に
DashStyle属性は、ユーザがカスタム定義されたダッシュ・パターンを指定することを可能にします。これは一連の数を使用して終わります。ダッシュ・スタイルは、ダッシュ(ストロークの引かれた部分)の長さ、およびダッシュ間のスペースの長さとでセットで定義されます。
.長さはライン幅に関連があります。「1」の長さはライン幅と等しい。EndCapスタイルは各ダッシュに適用されます。Arrowスタイルはそうではありません。
ストリングは、最初の数はダッシュの長さを定義します。次の数はスペースの長さで、これを一つのペアにします。
これは複雑なダッシュ・スタイルを形成するために繰り返されるかもしれません。
ストリングは常に1ペアの数を含んでいるべきです。
それが奇数個の数を含んでいる場合、最後が無視されるかもしれません。 

持っている定義は、Solid(default)、ShortDash、ShortDot、ShortDashDot、ShortDashDotDot、Dot、Dash、LongDash、DashDot、LongDashDot、LongDashDotDot

ユーザー定義例

endcap スタイルは各ダッシュに適用されるが、矢印スタイルは適用されない。
文字列はまずダッシュの長さを1つ定義し、その後にスペースの長さを1つ定義する。これを繰り返して複雑な破線スタイルを形成してもよい。
文字列はつねに数の対を含まなければならない。奇数個の数を含んでいれば、最後のものは無視されるべきである。

以下の表は、典型的な値とその意図される効果の解説とを列挙したものである。"0" は点を表わすものであり、この点は四つ折り対称的であるべきである(丸いエンドキャップならば円であるべきである)。直線のエンドキャップが flat ならば、ビューアは、可能な場所ではオペレーティングシステムの組み込みダッシュ(すなわち素早く描画できるもの)を選択するべきである。(VML W3Cノート日本語訳　どら猫本舗）

 strokeweightは上から1px 2pt 5pt 10mmです。

<v:stroke color="blue" endcap="square" linestyle="single" dashstyle="shortdash" />

<v:stroke color="blue" endcap="square" linestyle="single" dashstyle="shortdot" />

<v:stroke color="blue" endcap="square" linestyle="single" dashstyle="shortdashdot" />

<v:stroke color="blue" endcap="square" linestyle="single" dashstyle="shortdashdotdot" />

<v:stroke color="blue" endcap="square" linestyle="single" dashstyle="dot" />

<v:stroke color="blue" endcap="square" linestyle="single" dashstyle="dash" />

<v:stroke color="blue" endcap="square" linestyle="single" dashstyle="longdash" />

<v:stroke color="blue" endcap="square" linestyle="single" dashstyle="dashdot" />

<v:stroke color="blue" endcap="square" linestyle="single" dashstyle="longdashdot" />

<v:stroke color="blue" endcap="square" linestyle="single" dashstyle="longdashdotdot" />

<v:stroke color="blue" endcap="square" linestyle="single" dashstyle="8 2 1 2 1 2" />

<v:stroke color="blue" endcap="round" linestyle="thinthin" dashstyle="longdashdot" />

<v:stroke color="blue" endcap="square" linestyle="single" dashstyle="dashdotshortdash" />
定義されていないのに適当に記述しても駄目なのね。

filltype・・・線の塗りつぶし方法。デフォルトはsolidで、この場合、srcで画像指定されていても画像で塗りつぶしされず、colorで指定された色で塗りつぶされる。
とりうる値は、solid、tile、pattern、frame。<v:fill>サブエレメントのtype属性に近い。グラデーション塗りつぶしはないようだ。従ってo:opacity2もない。

左から"solid" "tile" "pattern" "frame"で示す。使用画像  weight="20pt"

src・・・ストローク塗りつぶしの参照画像をURLで指定する。src="http://〜〜〜"  src="../vml/aya1.gif"

使用画像aya1.gif  check_15.jpg cat1.gif koala.gif  weight="40pt"

左からsrc="aya1.gif" src="check_15.jpg" src="cat1.gif" src="koara.gif"  左から"solid" "tile" "pattern" "frame"で示す。

filltype="frame"の場合は、内接するサイズに調整される。

 imagesize・・・画像塗りつぶしサイズを横・縦比率で指定する。。初期値はimagesize="auto"。図形サイズの比率で示す。比率は%か小数で表す。画像サイズの比率ではない。VML W3Cノートには「ブラシを形成する画像のサイズ。デフォルトは画像のサイズである。」とあるが、filltype="frame"ではそうはならない。

赤い線は同じ図形を重ねてパスがわかるようにしています(<v:rect>。画像塗りつぶし開始位置にも注目。

左から、
[ filltype="tile" imagesize="auto" ]・・・画像サイズになる
[ filltype="tile" imagesize="auto" ]・・・画像サイズになる
[ filltype="pattern" imagesize="auto" ]・・・画像サイズになる
[ filltype="frame" imagesize="auto" ]・・・必ずしも画像サイズにならない

左から、
[ filltype="tile" imagesize="1.0,1.0" ]
[ filltype="tile" imagesize="0.5,0.5" ]
[ filltype="pattern" imagesize="100%,100%" ]
[ filltype="frame" imagesize="100%,100%" ]

左から、
[ filltype="tile" imagesize="1.1,1.1" ]
[ filltype="tile" imagesize="0.1,0.1" ]
[ filltype="pattern" imagesize="20%,20%" ]
[ filltype="frame" imagesize="110%,110%" ]

<v:shape style="width:150; height:100; left:30; top:20; position:absolute; rotation:0;" coordsize="100,100" coordorigin="0,0" filled="f" strokecolor="black" strokeweight="1" path="m 0 0 l 400 0">
<v:stroke weight="100px" filltype="frame" src="koala.gif" imagesize="0.5.0,0.5" on="t" />
</v:shape>

図形の縦サイズが0なのでtype="frame"では表示されない。---線の幅ではない。

<v:shape style="width:150; height:100; left:30; top:20; position:absolute; rotation:0;" coordsize="100,100" coordorigin="0,0" filled="f" strokecolor="black" strokeweight="1" path="m 0 0 l 400 100">
<v:stroke weight="100px" filltype="frame" src="koala.gif" imagesize="0.5.0,0.5" on="t" />
</v:shape>

斜線のために図形のサイズが決定され、そのサイズに対する比率で表示される。

<v:shape style="width:150; height:100; left:30; top:20; position:absolute; rotation:0;" coordsize="100,100" coordorigin="0,0" filled="f" strokecolor="black" strokeweight="1" path="m 0 0 l 400 100">
<v:stroke weight="100px" filltype="tile" src="koala.gif" imagesize="0.5.0,0.5" on="t" />
</v:shape>

上のをtype="tile"にしたもの。

<v:shape style="width:150; height:100; left:30; top:20; position:absolute; rotation:0;" coordsize="100,100" coordorigin="0,0" filled="f" strokecolor="black" strokeweight="1" path="m 0 0 l 400 100">
<v:stroke weight="100px" filltype="tile" src="koala.gif" imagesize="auto" on="t" />
</v:shape>

上のをimagesize="auto""にしたもの。

<v:shape style="width:150; height:100; left:30; top:20; position:absolute; rotation:0;" coordsize="100,100" coordorigin="0,0" filled="f" strokecolor="black" strokeweight="1" path="m 0 0 l 400 100">
<v:stroke weight="100px" filltype="tile" src="koala.gif" linestyle="thickbetweenthin" imagesize="auto" on="t" />
</v:shape>

linestyle="thickbetweenthin"にしてみた。

startarrow・・・開始点の矢印タイプ    endarrow・・・終了点の矢印タイプ。どちらも同じ属性値を持つ。

デフォルトはstartarrow="none" endarrow="none"。その他に classic open block diamond oval chevron doublechevronがある。

 classic

open

block

diamond

oval

chevron---不明（検索してもstartarrow="chevron"は見つからなかった）

doublechevron---不明（検索してもstartarrow="doublechevron"は見つからなかった）

none

矢印の描かれ方（赤い線は1pxの同じstrokeライン）

画像で塗りつぶし　filltype="tile"  （filltype="frame"では縦幅なしの図形なので塗りつぶされない）

startarrowwidth・・・開始点矢印の幅　endarrowwidth・・・終了点矢印の幅。どちらも同じ属性値を持つ。
デフォルトはmediumで、他に wideとnarrow。

                               medium                                                        wide                                                    narrow

 classic

open

block

diamond

oval

 startarrowlength・・・開始点矢印の長さ　　endarrowlength・・・終了点矢印の長さ。どちらの同じ属性値を持つ。
デフォルトはmediumで、他に wideとnarrow。 

                               medium                                                       short                                                   long

classic

open

block

diamond

oval

 color2・・・filltype="pattern"の場合にのみ、第二カラー（副色）として使用される。

src="aya1.gif" filltype="pattern" color="red" color2="blue

 src="aya1.gif" filltype="pattern" color="green" color2="yellow"