멀티 라인 SVG 툴팁

SVG 형식으로 여러 개의 다각형 모양을 만들었습니다. 함께 그룹화했습니다. 사용자가 그룹을 가리키면 툴팁 상자가 나타납니다. 나는 ecmascript를 사용했다. 내가 할 일은 도구 상자 상자를 여러 줄 상자로 만드는 것입니다. 아이디어가 있습니까?멀티 라인 SVG 툴팁

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

출처

2012-06-16 John Vaughan

SVG 텍스트를 상자 안에 포장 하시겠습니까? – Alex

나는 실제로 텍스트를 의미합니까 –

당신은 <text> 요소 또는 기존 텍스트 요소 내에서 <tspan> 요소 등을 만들 추가 요소의 텍스트 후속 행을 넣고 그들에게 같은 X 속성 값을 제공함으로써 이전의 것들 아래의 각 텍스트/tspan의 위치를 수 이전 줄의 테두리 상자 높이만큼 y 특성을 늘립니다.

다각형 요소 요소의 하위 요소로 <title> 요소를 만들고 그 안에 여러 줄 텍스트를 직접 넣으면 도구 설명이 대부분의 UA에서 여러 줄 툴팁으로 표시되므로 Firefox와 Opera에서 제대로 작동합니다. 여기에 html example이 있지만 SVG에는 title 속성이 아닌 title 요소가 있다는 점을 제외하면 SVG와 마찬가지로 잘 작동합니다.

출처

2012-06-16 15:13:52

그래서 tspan 옵션을 수행하고 툴팁이 마우스를 더 이상 따르지 않습니다? –

evt.clientX 및 evt.clientY를 기반으로 한 x, y 속성을 일부 오프셋과 함께 설정한다고 가정 할 때 왜 그런 일이 일어날 지 모르겠습니다. –

멀티 라인 SVG 툴팁

답변

관련 문제