Flash全盛期などには、イラストの中の要素をクリックしてページを移動するようなサイトを時々見かけました。

Flashの代用の一つとしてHTML５で導入されたインラインSVGですが、

実はSVG内の要素にHTMLのように<a>でリンクをつけることができます。

SVG内の要素にリンクをつけることができると、

Illustratorなどで作ったベクター形式のイラストをそのまま使えるので、

Flashのようにイラストの中の要素をクリックして移動するということが、

HTMLだけで組むよりも簡単に行えるようになります。

 

↓こちらはそちらを利用して作ってみたものです。

DEMO

 

方法

方法はとてもシンプルです。

まずはIllustratorを使って、イラストを制作してください。

このとき、リンクさせる要素ごとにグループ化を行っておくと、リンクをつけやすくなります。

イラストができたら、SVG形式でファイルを保存します。

 

保存できたら、書きだしたSVGファイルをテキストエディタ等で開き、

<svg>・・・</svg>のところをコピーして、

HTML上にペーストして配置します。

配置したら、リンクをつける要素を見つけ出して、そこにリンクを付けます。

 

要素をグループ化しておくと、見つけ出しやすくなります。

ブラウザの「要素を検証」機能を使うとすぐ見つけることができます。

見つけたら、その要素を<a>で囲みます。

 

ここまでは通常のHTMLと同じですが、リンク先の指定方法がSVGの場合、少し異なります。

HTMLではhref属性を使いますが、インラインSVGではこのhrefの前に「xlink:」というものをつけて、

「xlink:href=”リンク先”」という指定の仕方をします。

その他はHTMLの<a>と同じで、target=”_blank”の指定もできます。

この例ではページ内のアンカーリンクになっていますが、

URLの指定をして別のページにリンクさせることも、もちろん可能です。

 

HTMLだけで同じことをする場合は、position: absoluteなどを使うことが多いと思いますが、

場所の計算も大変で、特にレスポンシブではかなりの手間がかかってしまいます。

その点、インラインSVGを使った方法では、Illustratorで書きだしたイラストをそのまま使えるので、

かなり手間が軽減できます。

 

ただ、この方法を使った場合、iPhoneではページ内のアンカーリンクが動作しないバグらしきものがあるようですので、

現時点でiPhoneでもSVG要素のページ内のアンカーリンクが使えるようにする場合は、jQueryで以下の様なコードを追加してください。

 

 

参考サイト

svg要素の基本的な使い方まとめ