最近、SVG画像をHTML内に直接記述するインラインSVGに凝っていまして、色々と試しているんですけど、そこで気になることがありました。

インラインSVGの場合、リンクを貼ると全てクリッカブル(描画領域のみリンク領域になる)になってしまうんですよね。クリッカブルにできるところがSVGの特徴のひとつっていうのは分かるんですけど、クリッカブルになってほしくない時もあって、地味に困ってしまいました。

どうやったらクリッカブルにならないか色々とやってみたので、記録として残しておきたいと思います(そういう画像はPNGにしたり、imgやobject要素でやればいいわけですけど、インラインでやりたいときもあるのです)。

なお、勉強中ということもあり、あくまでも検証した結果で、正式には間違っている可能性もあって、その際はやさしく教えてください。

インラインSVGでクリッカブルにしたくない時

例えば、細い線とか特にテキストをSVGにして、それにリンクを貼りたい時です。普通に(SVGの一般的な方法で)リンクを貼っても、クリッカブルになってしまい、クリックしづらくなってしまいます。以下の画像のように。マウスホバーで色が変わりますのでお試しください(IE8以下では見れません)。

細すぎてクリック領域にマウスを置くのがとても大変ですよね。しかもリンクとは気付かない可能性が高いです。ちなみに、上記SVGのコード部分は以下のようになっています。

<div class="svg-test-images">
	<svg width="445px" height="47px" viewBox="0 0 445 47">
		<a xlink:href="#">
			<path d="M444.774,45.132 …省略… 724 31.578,39.599 30.267,41.197 Z"/>
		</a>
	</svg>
</div>

かなり省略してるけど、だいたいこんな感じです。svg要素の中にa要素があってpathを囲む、これがたぶんインラインSVGの一般的なリンクの入れ方かと思います。

これを通常のテキストリンクのように、ブロック全体をクリック領域にしたいのです。インライン要素をdisplay:blockするように。

なお、上記の状態で、単純にa要素に対してcssでdisplay:blockを追加しても、描画以外の部分がクリック領域にはなることはありませんでした。

インラインSVGの全体をクリック領域にする

いろんな方法があるんでしょうけど、ググっても全然でてこないんですよね。なので自力で色々と検証してみました。できたのが二通りの方法。

SVG全体をa要素で囲む

そのままですけど、(SVGのa要素は使わず)SVG要素全体をa要素で囲みます。※先程と同様コード部分はかなり省略しています。

<div class="svg-test-images">
	<a href="#">
		<svg viewBox="0 0 445 47" width="445px" height="47px">
			<path d="M444.774,45.132 …省略… 724 31.578,39.599 30.267,41.197 Z"/>
		</svg>
	</a>
</div>

この方法は、「SVG要素をa要素で囲んでもリンクにならない」ということをどこかで書かれていたのを見た気がしたので、もしかしたらブラウザによってはリンクになっていないかもしれません。一応、ChromeとFirefox(いずれも最新版)で確認するとちゃんとリンクになっていました。IE9でも大丈夫のようです。

透明の矩形を作ってpathと一緒にa要素で囲む

もう一つの方法が、SVGのa要素の中にrectで透明の矩形を作って包含してしまうという方法です。コードを見てもらうと早いと思います。

<div class="svg-test-images">
	<svg viewBox="0 0 445 47" width="445px" height="47px">
		<a xlink:href="#">
			<rect width="100%" height="100%" style="fill: transparent;"/>
			<path d="M444.774,45.132 …省略… 724 31.578,39.599 30.267,41.197 Z"/>
		</a>
	</svg>
</div>

rectにwidth100%、height100%として、スタイルでfill:transparent(透明)としています。こうすることで、全体をクリック領域にすることができました(Chrome、Firefox、IE9で確認済み)。個人的にはこちらの方が、1番目のものよりも自然なのかなと思っていますが、どうなんでしょう?

まとめ

他にも方法があるのかもしれませんが、とりあえずできたのが上の二つでした。もし、正式なやり方や他の方法をご存じの方がいらっしゃれば、ぜひ教えてください。お願いします。

.svg-test-images a path {
transition: all .2s linear;
fill: rgb(54, 46, 43);
}
.svg-test-images a:hover path {
fill: rgb(231, 76, 60);
}