エスエムティの愉快な仲間たち

SVG、使っていますか？
上手く使えばホームページの軽量化ができ、
メンテナンス性も上がる便利なファイル形式ですね。

通常のjpgやpngのように「img」タグで読むこともできますし、
「use」タグを使ってインラインで使い回すこともできます。

前者はとにかく楽。簡単にSVGを使いたい方向け。
ただし本当にただ表示することしかできません。

後者の場合は、例えばCSSの「fill」を使って
色を変更したりすることができます。

ナビゲーション等にSVGでアイコンを設置し、
マウスカーソルが乗ったら色を変える、なんてこともできますね。

で、最近こんな感じに



まさにマウスオンで色変更をするパーツを作ったのですが、
IEのみ、ちょうどSVGのエリアだけマウスオンの判定にならないという現象が起きました。

上の画像でいうと、水色のエリアにマウスが乗れば色が変わるのですが
ちょうどSVGであるパソコンのシルエット上にマウスが乗ると
色が戻ってしまうという状態でした。

またIEかよと思いつつ。

とりあえずこんな感じで解決↓



エリア全体の上に透明なdivタグを重ねました。
（表現上黒色にしましたが透明です）

マウスオーバーを行う際はIEに注意！

ぴの子