SVGツールチップ

最終更新日26 Jan 2017 13:10

SVGの最大の魅力の一つは、マウスオーバーでテキストが出てくることですよね!?
どうやってやるのか見てみましょう

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
    viewBox="-5 -80 100.0 100.0" height="100" width="700">
<g font-size='20.0' fill='#533E25'>
<a xlink:title="ツールチップです">
<text x='0' y='0'>ここにマウスをあててしばらく待つと。。。</text>
</a>
</g>
</svg>

大事なのはまず、svgタグのこれです。

xmlns:xlink="http://www.w3.org/1999/xlink"

これでxlinkが使用可能になります。
そして、ツールチップを載せたい図形を

<a xlink:title="ツールチップです"></a>

で囲みます

サンプル

もっと簡単!?<title>タグを使う方法

<svg  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 340.75 324.69">
<polygon id="star"  points="276.84 323.45 171.22 268.71 66.25 324.69 85.67 207.32 0 124.78 117.63 106.98 169.65 0 222.92 106.37 340.75 122.79 256.05 206.32 276.84 323.45">
<title>tool tip!!</title>
</polygon>
</svg>

図形タグの間に<title>ツールチップ</title>という風に埋め込む方法です。

inkscapeの場合

やり方が2通りあります

  1. オブジェクトを右クリックしてObject PropertiesTitleに注釈内容を書いてSetを押す
  2. オブジェクトを右クリックしてcreate linkをする

svg tooltip


files

サポートサイト Wikidot.com svgtooltip