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>元素或<tspan>元素，将后续文本行放入附加元素中，然后通过赋予它们相同的 x 属性值并将每个文本/tspan 放置在前面的文本/tspan 之下，并将 y 属性增加高度上一行的边界框。

或者更简单，只需将元素创建<title>为多边形形状元素的子元素，并将多行文本直接放在其中，大多数 UA 会将工具提示显示为多行工具提示，它当然适用于 Firefox 和 Opera。这是一个html 示例，但它应该与 SVG 一样工作，只是 SVG 有一个标题元素而不是一个标题属性。

于 2012-06-16T15:13:52.123 回答