SVG "툴팁"과 같은 상자를 만드는 방법은 무엇입니까?

StackOverflow https://stackoverflow.com/questions/102457

  •  01-07-2019
  •  | 
  •  

문제

기존의 유효한 SVG 문서가 있는 경우 "정보 팝업"을 생성하여 특정 요소(예: )에 마우스를 올리거나 클릭하면 임의의 양(예:단 한 줄의 툴팁이 아닌) 추가 정보가 있습니까?

최소한 Firefox에서는 올바르게 표시되어야 하며 이미지가 비트맵 형식으로 래스터화된 경우에는 보이지 않아야 합니다.

도움이 되었습니까?

해결책 

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

자세한 설명을 보실 수 있습니다 여기.

다른 팁

이 질문은 2008년에 제기되었습니다.SVG는 지난 4년 동안 급속히 발전했습니다.이제 제가 알고 있는 모든 플랫폼에서 툴팁이 완벽하게 지원됩니다.사용 <title> 태그(속성이 아님)를 추가하면 기본 도구 설명이 표시됩니다.

문서는 다음과 같습니다.https://developer.mozilla.org/en-US/docs/SVG/Element/title

이후 <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-comComponents/tooltip

아직 여러 줄이 필요한 여러 줄의 도구 설명을 포함하지 않았습니다. <tspan> 요소 및 수동 단어 줄 바꿈.

이것은 작동합니다:

nodeEnter.append("svg:element")
   .style("fill", function(d) { return d._children ? "lightsteelblue" : "#fff"; })
   .append("svg:title")
   .text(function(d) {return d.Name+"\n"+d.Age+"\n"+d.Dept;}); // It shows the tool tip box with item [Name,Age,Dept] and upend to the svg dynamicaly
라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top