[解決済み] html svg オブジェクトをクリック可能なリンクにもできるようにする。

質問

HTMLページにSVGオブジェクトがあり、それをアンカーでラップして、SVG画像がクリックされるとアンカーリンクに移動するようにしています。

<a href="http://www.google.com/">
    <object data="mysvg.svg" type="image/svg+xml">
        <span>Your browser doesn't support SVG images</span>
    </object>
</a>

このコードブロックを使用すると、svgオブジェクトをクリックしてもgoogleに移動しません。IE8<では、スパンテキストはクリック可能です。

タグを含むようにsvg画像を変更したくありません。

質問ですが、どうすればsvg画像をクリックできるようになりますか？

どのように解決するのですか？

実は、これを解決する一番の方法は... <object> タグで、使うことなんです。

pointer-events: none;

注意：Ad Blocker プラグインをインストールしているユーザーは、マウスを乗せると右上にタブのような [Block] が表示されます（フラッシュバナーと同じものです）。このCSSを設定することで、それも解消されます。

http://jsfiddle.net/energee/UL9k9/