IEでベクターグラフィックを利用するためのRaphael-min.jsに関するエラー

クロスブラウザ対策でSVGが必要になったわけではないのだが、
別のjQueryプラグインでSVGを利用してクロスブラウザ対策を行っているものを利用する際に、
raphael-min.jsの読み込み部分でこけていたようなのでメモ。

発生

IE6およびIE7でRaphael-min.jsを利用した際に、エラーを吐いたので調べてみた。
IE6およびIE7は、IETester等では見つからなかった為、実機で動かす段まで気づかず、
実際クライアントにページ確認してもらった際に動かずえらく焦ったのでメモ。
いわゆるリアルなIE6およびIE7の場合のみ下記のようなエラーが発生して止まる模様。

Line: 11
Character: 23098
Code: 0
Error Message: ‘)’ がありません。

解決策

おそらく特定条件下等で起こる現象ではないかと思い解決策を探したところ、
https://groups.google.com/forum/#!topic/raphaeljs/floDU-pd-0g
どうも解決策として、

doc.createStyleSheet().addRule(".rvml","behavior:url(#default#VML)");

javascriptのこの部分をコメントアウトして
代わりに

.rvml{
behavior:url(#default#VML)
}

CSSにこれを追加する。
ということで解決できるという意見もあるようだ。
ただ、javascriptの為にスタイルシートを汚すのはスマートじゃないな、なんて思ってとりあえず
raphael-min.jsじゃわかりにくいからraphael.jsを引っ張ってきて、とやっているとなぜかエラーが無くなった。
何やらMinifiedモデルを使わずに、Uncompressedモデルを使えばこのエラーは解決できるらしい。
結構簡単なことだが、ちょっと詰まった部分だったので一応メモ程度に残しておきます。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です