RaphaelJS の Element.glow() をドロップシャドウに使う

RaphaelJS の Element.glow() は、同じ外形を持った半透明の path/shape を、異なった storke-width で多数作成して set で包んで返すという実装です。SVG と VML 両方で同じような効果を得るために、このような実装になっているようです。

ドロップシャドウだと大概の場合 offset が必要ですが、offset を設定すると、塗りがないので中の何もない部分が見えてしまいます。fill: true とすることで塗りが設定できます。

さらに、同じ paper 上の Element に glow を複数設定していると、別の要素の上に影が乗ってしまうことがあります。そういう場合は要素を toFront() すると影の上に持っていくことができます。

以上のことをまとめると、以下のようなコードになります。

window.onload = function() {
  var paper = Raphael('paper', 500, 500),
      rects = paper.set(),
      shadows = paper.set();

  // Create rects
  rects.push(paper.rect(201, 175, 50, 50));
  rects.push(paper.rect(100, 150, 100, 100));
  rects.attr({
    'fill': '#1481e3',
    'stroke-width': 0
  });

  // Create shadows
  for (var i = 0; i < rects.length; i++) {
    var rect = rects[i],
        shadow = rect.glow({ offsetx: 20, offsety: 20, fill: true });
    shadows.push(shadow);
  }

  // Bring rects to the front
  rects.toFront();
};

しかし IE で VML の表示を見ると、影の中が影の淵の方よりも色が薄いという変なことになってしまいます。このあたり、何とかならないんでしょうか。