popup - SVG「ツールチップ」のようなボックスを作成するには?

Question

既存の有効な SVG ドキュメントが与えられた場合、「情報ポップアップ」を作成する最良の方法は何ですか。特定の要素 (たとえば、追加情報？

これは、少なくとも Firefox では正しく表示され、画像がビットマップ形式にラスタライズされている場合は表示されません。

Answer 1

この質問は 2008 年に行われました。SVG はその間の 4 年間で急速に改善されました。現在、ツールチップは、私が認識しているすべてのプラットフォームで完全にサポートされています。タグ (属性ではない) を使用する<title>と、ネイティブのツールチップが表示されます。

ドキュメントは次のとおりです: https://developer.mozilla.org/en-US/docs/SVG/Element/title

Answer 2

<svg>
  <text id="thingyouhoverover" x="50" y="35" font-size="14">Mouse over me!</text>
  <text id="thepopup" x="250" y="100" font-size="30" fill="black" visibility="hidden">Change me
    <set attributeName="visibility" from="hidden" to="visible" begin="thingyouhoverover.mouseover" end="thingyouhoverover.mouseout"/>
  </text>
</svg>

詳細については、こちらを参照してください。

Answer 3

この<set>要素は Firefox 3 では動作しないため、ECMAScript を使用する必要があると思います。

次のスクリプト要素を SVG に追加すると:

  <script type="text/ecmascript"> <![CDATA[

    function init(evt) {
        if ( window.svgDocument == null ) {
        // Define SGV
        svgDocument = evt.target.ownerDocument;
        }
        tooltip = svgDocument.getElementById('tooltip');
    }

    function ShowTooltip(evt) {
        // Put tooltip in the right position, change the text and make it visible
        tooltip.setAttributeNS(null,"x",evt.clientX+10);
        tooltip.setAttributeNS(null,"y",evt.clientY+30);
        tooltip.firstChild.data = evt.target.getAttributeNS(null,"mouseovertext");
        tooltip.setAttributeNS(null,"visibility","visible");
    }

    function HideTooltip(evt) {
        tooltip.setAttributeNS(null,"visibility","hidden");
    }
    ]]></script>

onload="init(evt)"init() 関数を呼び出すには、SVG 要素に追加する必要があります。

次に、SVG の末尾にツールチップ テキストを追加します。

<text id="tooltip" x="0" y="0" visibility="hidden">Tooltip</text>

最後に、マウスオーバー機能を追加する各要素に次を追加します。

onmousemove="ShowTooltip(evt)"
onmouseout="HideTooltip(evt)"
mouseovertext="Whatever text you want to show"

http://www.petercollingridge.co.uk/interactive-svg-components/tooltipで、機能が改善されたより詳細な説明を書きました。

<tspan>複数の要素と手動でのワード ラップが必要になる複数行のツールチップはまだ含めていません。