れぶろぐ

2008-06-14 (土)

■ VML と DirectX Alpha フィルタを用いた放射状グラデーション

SIE で radialGradient をサポートするための予備実験を行ってみました。

SVG や Canvas では、図形を塗りつぶす際に放射状のグラデーションを指定することができます。一方、VML でも gradientradial という指定はできるのですが、これがひどいバグ持ちで、まともな描画をしてくれません。以下の SVG ファイルを IE と IE 以外のブラウザで表示してみると、違いが分かると思います。（IE で見た場合、SIE 0.25 を用いて VML に変換したものが表示されます。）

radialGradient 要素を用いた SVG ファイル

<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg">

  <defs>
    <radialGradient id="grad1">
      <stop offset="0%" stop-color="red"/>
      <stop offset="100%" stop-color="green"/>
    </radialGradient>
  </defs>

  <path d="M 100 100 L 300 100 200 300 z"
    stroke="blue" stroke-width="3" fill="url(#grad1)" />

</svg>

そこで Internet Explorer で使える機能をつらつらと眺めていたところ、 DirectX の Alpha フィルタが、放射状のグラデーションをサポートしていることに気が付きました。これを使えばなんとかなりそうに思えたので、試しにやってみました。仕組みとしてはこうです。

同じ図形を２つ重ねて描く
下になる図形は、１色で塗りつぶす。
上になる図形は、もう１つの色で塗りつぶし、Alpha フィルタをかける

こういう方針で作ったのが、以下のファイルです。 IE で見ると、上の SVG ファイルと同じような放射状のグラデーションが表示されるはずです。

VML と DirectX Alpha フィルタを用いた放射状グラデーション (IE 専用)

<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<style>
v\:* {behavior:url(#default#VML);}
</style>
</head>
<body>

<v:group style="position: relative; overflow: hidden; width: 1000px; height: 1000px;" coordsize="1000,1000">

<v:shape path="m 100,100 l 300,100 200,300 x e" strokecolor="blue" strokeweight="3px" fillcolor="green"
style="width: 100%; height: 100%;" />

<v:shape path="m 100,100 l 300,100 200,300 x e" strokecolor="blue" strokeweight="3px" fillcolor="red"
style="width: 100%; height: 100%; filter:progid:DXImageTransform.Microsoft.Alpha(style=2,opacity=100,finishopacity=0);" />

<v:rect style="width: 100%; height: 100%; z-index: -1;" stroked="f" filled="f" />

</v:group>

</body>
</html>

このようにすれば、 SIE だけでなく ExplorerCanvas でも、放射状グラデーションの機能をサポートできると思います。

このエントリの続き: 2008-10-12 (日)

Tags: VML |