吉本集の個人ブログ
Web制作の技術について書いています。たまに日記も書きます。

【SVG】ハイパーリンク(aタグ)を設定してみた

2015年2月16日 / category : svg

SVGにハイパーリンクを設定してみました。
と言っても、objecy、embed、iframeを、aタグで囲むということになるので、その時点で仕様的にNGですね。

HTML
<a href="#"><object></object></a> //すでにNG
<a href="#"><embed></embed></a> //すでにNG
<a href="#"><iframe></iframe></a> //すでにNG

でも、ま、とりあえず、やってみました。

svgタグによる埋め込み
背景画像として埋め込み(CSS)
objectタグによる埋め込み
embedタグによる埋め込み
iframeタグによる埋め込み
imgタグによる埋め込み

この結果は想像できたかもしれませんが、

■OK
svgタグによる埋め込み / 背景画像として埋め込み(CSS) / imgタグによる埋め込み

■NG
objectタグによる埋め込み / embedタグによる埋め込み / iframeタグによる埋め込み

となりました。

また、svgタグによる埋め込みの場合は、少々仕様が異なります。

HTML
<svg width="100" height="105">
<a xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/weblog/">
<rect width="100" height="105" fill="#e5000d" />
</a>
<foreignObject display="none"><a href="/weblog/"><img src="logo.png"/></a></foreignObject>
</svg>

svgタグをaタグで囲むのではなく、rectタグを囲みます。
また、href属性もxlink属性の中にいれます。