0

SVG 形式で多数の多角形を作成しました。そしてそれらをグループ化しました。ユーザーがグループにカーソルを合わせると、ツールヒント ボックスが表示されます。私はecmascriptを使用しました。私がやろうとしているのは、ツールチップ ボックスを複数行ボックスにすることです。これを行う方法はありますか？

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

    function init(evt)
    {
        if ( window.svgDocument == null )
        {
        svgDocument = evt.target.ownerDocument;
        }

        tooltip = svgDocument.getElementById('tooltip');
        tooltip_bg = svgDocument.getElementById('tooltip_bg');

    }

    function ShowTooltip(evt, mouseovertext)
    {
        tooltip.setAttributeNS(null,"x",evt.clientX+17);
        tooltip.setAttributeNS(null,"y",evt.clientY+14);
        tooltip.firstChild.data = mouseovertext;
        tooltip.setAttributeNS(null,"visibility","visible");

        length = tooltip.getComputedTextLength();
        tooltip_bg.setAttributeNS(null,"width",length+8);
        tooltip_bg.setAttributeNS(null,"x",evt.clientX+14);
        tooltip_bg.setAttributeNS(null,"y",evt.clientY+1);
        tooltip_bg.setAttributeNS(null,"visibility","visibile");
    }


    function HideTooltip(evt)
    {
        tooltip.setAttributeNS(null,"visibility","hidden");
        tooltip_bg.setAttributeNS(null,"visibility","hidden");
    }

    ]]>
  </script>
<SVG>
<g onmousemove="ShowTooltip(evt, 'GHANA 2000')" onmouseout="HideTooltip(evt)">
    <path fill="#EEEEEE" d="M250,0c47,0,85.183,10.506,125,33.494L250,250V0z"/>
    <path id="score" d="M250,57c36.284,0,65.761,8.11,96.5,25.857L250,250V57z"/>
    <path fill="none" stroke="#FFFFFF" stroke-width="2" stroke-miterlimit="10" d="M250,0c47,0,85.183,10.506,125,33.494L250,250V0z"/>
    <text transform="matrix(1 0 0 1 283.9883 92.0024)" fill="#FFFFFF" font-family="'WalkwayBlack'" font-size="16">62</text>
</g>

<rect class="tooltip_bg" id="tooltip_bg" x="0" y="0" width="55" height="17" visibility="hidden"/>
<text class="tooltip" id="tooltip" x="0" y="0" visibility="hidden">Tooltip</text>
<SVG>
4

1 に答える 1

0

既存のテキスト要素内にさらに<text>要素または要素を作成し、後続のテキスト行を追加の要素に配置してから、同じx属性値を指定して各テキスト/ tspanを前のテキストの下に配置し、y属性を次の高さだけ増やすことができます。<tspan>前の行のバウンディングボックス。

または、もっと簡単に言えば、<title>ポリゴン形状要素の子として要素を作成し、その中に複数行のテキストを直接配置すると、ほとんどのUAでツールチップが複数行のツールチップとして表示されます。これは、FirefoxとOperaで確実に機能します。これはhtmlの例ですが、SVGにtitle属性ではなくtitle要素があることを除けば、SVGでも同様に機能するはずです。

于 2012-06-16T15:13:52.123 に答える