VMLの塗りつぶしに関するサブエレメント<v:fill>について

<v fill>サブエレメントは<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="red" 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 x e">
<v:fill Color="red" Color2="blue" Opacity="0.9" o:opacity2="0.5" focus="0" focusposition="0,0" focussize="0,0" type="gradientRadial" />
</v:shape>
</v:group>

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

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

on color opacity color2 type opacity2 src size origin position aspect alignshape colors angle method focus focussize focusposition althref

on・・・塗りつぶしするかどうかを決定する。on="true/false"またはon="t/f"。主要エレメントの塗りつぶし設定(filled)を変更する。pathのnfコマンドがある場合、そのサブパスはそのままの状態を保つ。

<v:shape stroked="t" filled="f" strokecolor="blue" strokeweight="2" fillcolor="#ff6666" style="position:absolute; width:100; height:100; top:0; left:0; rotation:0;" path="wa -100 -100 0 0 -100 -100 -100 -99 x e wa 0 0 100 100 0 0 0 1 nf x e wa 100 -100 200 0 100 -100 100 -99 ns x e" coordsize="100,100" coordorigin="0,0">
<v:fill id="fset" on="t" />
</v:shape>

color・・・第一カラー。主要カラーで、塗りつぶし色であるfillcolorを変更する。

<v:shape stroked="t" filled="f" strokecolor="blue" strokeweight="2" fillcolor="#ff6666" style="position:absolute; width:100; height:100; top:100; left:100; rotation:0;" path="wa -100 -100 0 0 -100 -100 -100 -99 x e wa 0 0 100 100 0 0 0 1 nf x e wa 100 -100 200 0 100 -100 100 -99 ns x e" coordsize="100,100" coordorigin="0,0">
<v:fill id="fset" color="blue" on="t" />
</v:shape>

<v:shape stroked="t" filled="f" strokecolor="blue" strokeweight="2" fillcolor="#ff6666" style="position:absolute; width:100; height:100; top:100; left:100; rotation:0;" path="wa -100 -100 0 0 -100 -100 -100 -99 x e wa 0 0 100 100 0 0 0 1 nf x e wa 100 -100 200 0 100 -100 100 -99 ns x e" coordsize="100,100" coordorigin="0,0">
<v:fill id="fset" color="rgb(255,100,10)" on="t" />
</v:shape>

opacity・・・塗りつぶしの不透明度。0〜1.0まで。%単位でもok。第一カラーの不透明度。

<v:shape stroked="t" filled="f" strokecolor="blue" strokeweight="2" fillcolor="#ff6666" style="position:absolute; width:100; height:100; top:100; left:100; rotation:0;" path="wa -100 -100 0 0 -100 -100 -100 -99 x e wa 0 0 100 100 0 0 0 1 nf x e wa 100 -100 200 0 100 -100 100 -99 ns x e" coordsize="100,100" coordorigin="0,0">
<v:fill id="fset" color="blue"opacitiy="0.5" on="t" />
</v:shape>

<v:shape stroked="t" filled="f" strokecolor="blue" strokeweight="2" fillcolor="#ff6666" style="position:absolute; width:100; height:100; top:100; left:100; rotation:0;" path="wa -100 -100 0 0 -100 -100 -100 -99 x e wa 0 0 100 100 0 0 0 1 nf x e wa 100 -100 200 0 100 -100 100 -99 ns x e" coordsize="100,100" coordorigin="0,0">
<v:fill id="fset" color="blue"opacitiy="30%" on="t" />
</v:shape>

color2・・・塗りつぶし第2カラー。副色となり、画像で塗りつぶすtype="pattern"の場合か、グラデーション塗りつぶしの第二カラーとなる。

１、<v:fill id="fset" color="red" opacity="0.7" color2="green" type="gradient" on="t" />
２、<v:fill id="fset" color="red" opacity="1.0" color2="green" type="pattern" src="aya1.gif" on="t" />
３、<v:fill id="fset" color="red" opacity="1.0" color2="green" type="gradientradial" on="t" />

type・・・塗りつぶしのタイプを決定する。省略した場合はtype="solid"となり通常の塗りつぶしとなる。
とりうる値は solid gradient gradientradial tile pattern frame gradientcenter。この内gradientcenterはMSDNにもVML W3Cノートにも記述がないが、Microsoft VML Generatorで見つけた。

type="gradientradial"・・・放射状グラデーション
<v:fill id="fset" color="red" opacity="0.5" o:opacity2="0.8" color2="green" type="gradientradial" on="t" />
一番右は<v:oval>で円状のグラデーションになる。

type="tile"・・・shape内に画像をタイル状に並べて塗りつぶす。面白いのはopacityが1.0以外のときにcolorで塗りつぶしが有効となり、画像と共に指定された不透明度で表示される。1.0の時は背景色は反映しない。
<v:fill id="fset" color="blue" opacity="1.0" o:opacity2="0.2" color2="green" type="tile" src="aya1.gif" on="t" />

<v:fill id="fset" color="blue" opacity="0.5" o:opacity2="0.2" color2="green" type="tile" src="aya1.gif" on="t" />

type="pattern"・・・shape内に画像をcolorとcolor2でパターン化して塗りつぶす。色の明度により明るい部分がcolorで、暗い部分がcolor2で置換されるようだ。不透明度も反映される。
<v:fill id="fset" color="red" opacity="1.0" o:opacity2="1.0" color2="green" type="pattern" src="aya1.gif" on="t" />

type="frame"・・・shapeのサイズに合わせて画像を貼り付ける。opacityが1.0以外のときにcolorで塗りつぶしが有効となり、画像と共に指定された不透明度で表示される。1.0の時は背景色は反映しない。
<v:fill id="fset" color="red" opacity="1.0" o:opacity2="1.0" color2="green" type="frame" src="aya1.gif" on="t" />
 

<v:fill id="fset" color="red" opacity="0.4" o:opacity2="1.0" color2="green" type="frame" src="aya1.gif" on="t" />

nfコマンドではどうなる？
<v:shape stroked="t" filled="t" strokecolor="blue" strokeweight="2" fillcolor="#ff6666" style="position:absolute; width:100; height:100; top:0; left:0; rotation:0;" path="m 0 0 l 0 100 c 150 100 150 0 0 0 x e wa 150 0 250 100 150 0 150 1nf  x e m 230 20 l 230 120 330 120 330 20 230 20 x e" coordsize="100,100" coordorigin="0,0">
<v:fill id="fset" color="red" opacity="0.4" o:opacity2="1.0" color2="green" type="frame" src="http://newing.qee.jp/vml/aya1.gif" on="t" /></v:shape>

<v:oval>では

 type="gradientradial"

 type="gradientcenter"

o:opacity2・・・color2の不透明度？載っていません。TIMEで扱えない属性だそうです。MSDNにはありました。背景不透明度？。

<v:fill id="fset" color="red" opacity="0.3" o:opacity2="0.8" color2="green" type="gradient"  on="t" />

src・・・画像として読み込まれるべきファイルへのURL情報。　cat1.gif

<v:fill id="fset" color="red" opacity="1.0" o:opacity2="1.0" color2="green" type="frame" src="cat1.gif" on="t" />

size・・・CSSの絶対単位、またはパスの境界ボックスサイズに対する比率で画像を表示する。比率は%でも倍率(小数点可能）でもOK。
CSS絶対単位としては、in（インチ）、cm（センチメートル）、mm（ミリメートル）、pt（ポイント）、pc（パイカ）がある。
※px（ピクセル）は相対単位なので使用できない（エラーになることがあるので注意・・・ブラウザがフリーズしました~(=^‥^A ｱｾｱｾ・・・）。
type="pattern"、"tile"、"frame"いずれでも有効。初期値はsize="auto"

<v:fill id="fset" color="red" opacity="1.0" o:opacity2="1.0" color2="green" type="pattern" src="aya1.gif" size="10pc,10pc" on="t" />

<v:fill id="fset" color="red" opacity="1.0" o:opacity2="1.0" color2="green" type="tile" src="aya1.gif" size="10%,10%" on="t" />

<v:fill id="fset" color="red" opacity="1.0" o:opacity2="1.0" color2="green" type="frame" src="aya1.gif" size="0.5,0.75" on="t" />
境界ボックスの1/2、3/4サイズで表示される。

origin・・・表示画像サイズの割合分、画像を左上にシフトする。
割合は小数でも%でもよく、マイナス値は右下方向にシフトされる。

origin="0.5,0.3"ならば、デフォルトの表示位置に対し、画像サイズの横幅50%分左にずれ、画像サイズの30%分上にずれてる。初期値はorigin="auto"

元画像

左はtype="frame"、右はtype="tile"で、size="auto" origin="auto"

origin="0.5,0.5"としてみる。

size="150pt,100pt" origin="auto"

size="150pt,100pt" origin="0.5,0.5"

size="150pt,100pt" origin="0.2,0.1"

size="150pt,100pt" origin="-30%,-15%"

size="0.8,0.8" origin="-30%,-15%"

position・・・境界ボックスサイズの割合分をデフォルト表示位置からシフトする。初期値はposition="auto"。originとの違いは、originが画像の表示サイズに対する割合分左上にシフトするのに対し、positionでは図形の境界ボックスサイズに対する割合で、右下にシフトされる。マイナス値や%のOK。

size="auto" origin="auto" position="auto"

size="auto" origin="auto" position="0.2,0.3"

size="150pt,100pt" origin="auto" position="auto"

size="150pt,100pt" origin="auto" position="0.1,0.1"

size="150pt,100pt" origin="-0.1,-0.1" position="aiuto"

size="150pt,100pt" origin="-0.1,-0.1" position="0.1,0.1"

size="20%,20%" origin="auto" position="auto"

size="20%,20%" origin="auto" position="10%,10%"

size="20%,20%" origin="-10%,-10%" position="auto"

aspect・・・画像の縦横比率を保ち表示させるかどうか。

aspect="ignore"・・・縦横比率は無視して、sizeにあわせる。デフォルトはignore。

aspect="atmost"・・・縦横比は保たれる。sizeで指定される長方形よりも大きく描かれることはない。

aspect="atleast・・・縦横比は保たれる。sizeで指定される長方形によりも小さく描かれることはない。

size="100pt,100pt" origin="auto" position="auto" aspect="ignore"

size="100pt,100pt" origin="auto" position="auto" aspect="atmost"

size="100pt,100pt" origin="auto" position="auto" aspect="atleast"

alignshape・・・全く意味がわかりません。m(_ _"m)　だんだん怒りがこみ上げてきた。あまりにひどい解説だよ。Microsoft
直訳は「イメージが形と提携するかどうか決めます。

colors・・・中間グラデーションの色とその色が示される位置をグラデーション塗りつぶし方向に沿った割合で示す。
colorで示される第一カラーは0%の位置に、color2で示される二カラーは100%の位置に示される。

color="30% red, 70% blue, 90% green"・・・0% color 30% red, 70% blue, 90% green, 100% color2となるグラーデーション塗りつぶし。

１、<v:fill id="fset" color="black" opacity="0.7" color2="yellow" type="gradient"colors="30% red, 70% blue, 90% green" on="t" />
２、<v:fill id="fset" color="black" opacity="0.9" color2="yellow" type="pattern" colors="30% red, 70% blue, 90% green" src="aya1.gif" on="t" />
３、<v:fill id="fset" color="black" opacity="1.0" color2="yellow" type="gradientradial" colors="30% red, 70% blue, 90% green" on="t" />
４、<v:fill id="fset" color="black" opacity="0.8" o:opacity2="0.4" color2="yellow" type="gradientradial" colors="30% red, 70% blue, 90% green" on="t" />

angle・・・グラデーションが進んでいく角度。デフォルト値は0度で、左から右まで水平のベクトルです。正の角は左回りの方角へ勾配を回転させます。type="gradientradial"には作用しない。

１、<v:fill id="fset" color="black" opacity="0.7" color2="yellow" type="gradient"colors="30% red, 70% blue, 90% green" angle="30" on="t" />
２、、<v:fill id="fset" color="black" opacity="1.0" color2="yellow" type="gradientradial" colors="30% red, 70% blue, 90% green" angle="30" on="t" />
３．<v:fill id="fset" color="black" opacity="0.7" color2="yellow" type="gradient"colors="30% red, 70% blue, 90% green" angle="0" on="t" />
４、<v:fill id="fset" color="black" opacity="0.7" color2="yellow" type="gradient"colors="30% red, 70% blue, 90% green" angle="90" on="t" />

method・・・勾配塗りつぶしを生成するために使用される方法。sigmaって�煤H総和？なんでしょね？見てこうなると認識するしかないか・・・

二つずつ対で見てください。左がtype="gradient"、右がtype="gradientradial"。
右側二つは<v:oval>なので、type="gradientradial"で円状グラデーションになっている。

method="none"・・・No sigma fill

method="linear"・・・inear sigma fill

metod="sigma"・・・Sigma fill

method="any"・・・Any sigma fill

focus・・・グラデーション塗りつぶしの中心。値の範囲は%で-100 から +100 まで。小数では、-1.0から+1.0まで。デフォルトはfocus="0"

type="gradient"
focus="0%"     focus="50%"    focus="0%"     focus="50%"

type="gradientradial"
focus="0%"     focus="50%"    focus="0%"     focus="50%"

<v:oval>の場合

type="gradient"
focus="0%"  focus="50%"

type="gradientradial"
focus="0%"  focus="50%"

focussize・・・type="gradientradial"における最も内側の長方形のサイズ。サイズは図形横幅に対する比率と縦幅に対する比率で指定する。比率は%でも小数でも良い。type="gradient"には作用しない。初期値はdocussize="0,0"
綺麗なブレンドのために最低90%までに留めておくことが望ましいようです。100%は推奨されない。

focus="0"
focussize="0,0"     focussize="50%,50%"

focus="50%"
focussize="0,0"     focussize="50%,50%"

focus="0"
focussize="0,0"       focussize="50%,50%"

focus="50%"
focussize="0,0"       focussize="50%,50%"

<v:oval>の場合

focus="0%"
focussize="0,0"    focussize="50%,50%"

 focus="50%"
foxussize="0.5,0.5"    foxussize="-20%,-20%"

focus="100%"
focussize="0,0"    focussize="50%,50%"

focus="100%"汚い
focussize="50%,100%"    focussize="100%,50%"

focusposition・・・放射状のグラデーションで最も内側の長方形の位置（左上）を図形サイズの割合で示す。値は%でも小数でも良い。
focussize="0,0"における中央位置に指定させるfocuspositionは50%,50%である。type="gradientradial"にのみ作用する。

focussize="0,0" focusposition="0,0"・・・左上隅に長方形サイズ"0,0"で放射状グラーデーションの焦点が存在。

focussize="0,0" focusposition="50%,50%"・・・中央に長方形サイズ"0,0"で放射状グラーデーションの焦点が存在。

focussize="0.1,0.1" focusposition="50%,50%"・・・長方形サイズが図形サイズの1/10であり、その長方形の左上コーナー位置は図形の中央である。

focussize="0.2,0.2" focusposition="0.4,0.4"・・・長方形サイズが図形サイズの2/10であり、その長方形を中央に表示させるには、(1.0-0.2)/2=0.4にすればよい。図形サイズに長方形サイズを引いて、2で割る。

<v:oval>では・・・

focussize="0.2,0.2" focusposition="0.4,0.4"・・・長方形サイズが図形サイズの2/10であり、その長方形を中央に表示させるには、(1.0-0.2)/2=0.4にすればよい。図形サイズに長方形サイズを引いて、2で割る。

帽子・・・を使って塗りつぶし。

下側は少し暗めにするので、color="black"でopacity="0.7"として背景色を少し上乗せ。画像はタイル状に貼り付けるので、type="tile"に。
<v:fill type="tile" src="paper015.jpg" color="gray" opacity="0.8" on="t" />

上側はそのまま貼り付けますが、少しずらしたいのでorigin="0.1,0.2"としました。
v:fill type="tile" src="paper015.jpg" origin="0.1,0.2" on="t" /> 

髪・・・後ろ髪は#766031=>#080302とグラデーションかけます。color="#080302" color2="#766031" type="gradient"でいいでしょうか。

前髪はcolorとcolor2を逆にしてみましょう。

顔・首・・・#F7DED6でグラデーションさせましょう。color="#F7DED6" color2="#F6DECE" type="gradient"

服・・・を使って塗りつぶし。袖・・・で塗りつぶし。

唇・・・color="#D5776A" color2="#FEEEEE" type="gradient" angle="90"

眉・・・髪と同じにします。

では完成！