Hatena::Groupsubtech

ういはるかぜの化学

Sunday, February 12, 2012

SVGobject要素で表示してリンクにする 20:34 SVGをobject要素で表示してリンクにする - ういはるかぜの化学 を含むブックマーク はてなブックマーク - SVGをobject要素で表示してリンクにする - ういはるかぜの化学

解像度依存しないSVGファイル使いたいけど対応していないブラウザのことを考えるとimg要素で参照できない…それならフォールバックコンテンツを持てるobject要素で参照して表示しよう、そしてリンクにしようという話です。

まあ、そんなの下記のように普通にマークアップしてあげればいいのではと思うのですが、試してみるとそうは問屋おろしてくれませんでした。

<a href="http://www.example.com/">
<object data="img/sample_01.svg" width="100px" height="100px" type="image/svg+xml">
<img src="img/sample_01.png" alt="Sample 01" />
</object>
</a>

表示だけなら表示されるのですが、いくつかあった問題点と解決方法をまとめておくと…

というわけで結果こうなりました。object要素むずかしいですね。

<a href="http://www.example.com/" style="display: inline-block;">
<object style="pointer-events: none;" onload="if (this.getSVGDocument) this.getSVGDocument().documentElement.style.cursor='pointer';" data="img/sample_01.svg" width="100px" height="100px" type="image/svg+xml">
<img src="img/sample_01.png" alt="Sample 01" />
</object>
</a>

サンプル: http://mayuki.github.com/Sample/Test/Svg+Object/

ちなみに

IE9以降はSVGを取り扱えるからobject要素で埋め込んでIE7,8モードにしてもSVGが表示されます

あと、SVGのa要素を使えば!と思ってそういうことをすると割と予想外のことが起こりますのでぜひお確かめください。

SVGのa要素を使ったサンプル: http://mayuki.github.com/Sample/Test/Svg+Object/Sample2.html

あわせて読みたい

SVGをobject要素で活用する | 水無月ばけらのえび日記

トラックバック - http://subtech.g.hatena.ne.jp/mayuki/20120212