Question

我用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>

Answer 1

您可以在现有文本元素中创建更多<text>元素或<tspan>元素，将后续文本行放在其他元素中，然后将每个text / tspan定位在前一个文本/ tspan之下，方法是相同的x属性值，并将y属性增加前一行边界框的高度。

或者更简单地说，只需创建<title>元素作为多边形形状元素的子元素，并将多行文本直接放在其中，工具提示将被大多数UA显示为多行工具提示，它肯定适用于Firefox和歌剧。这是一个html example但它应该与SVG一样好，除了SVG有一个title元素而不是title属性。

多行Svg工具提示

1 个答案: