SVGツールチップ

svg-tooltip.png

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>

で囲みます

サンプル

inkscapeの場合

やり方が2通りあります

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

svg tooltip

サポートサイト Wikidot.com svgtooltip