프로그래밍 방식으로 SVG 툴팁 표시

Question

제목이 원의 툴팁으로 표시되도록 svg : title 요소가있는 svg : circle이 있습니다. 프로그래밍 방식으로 (javascript 사용)이 툴팁을 표시하고 숨길 수 있습니까?

Answer 1

제목 요소 자체를 프로그래밍 방식으로 표시 할 수 없기 때문에 <text> 요소를 만들어 적절히 배치해야합니다. 텍스트에는 배경이 없으므로 배경으로 <rect>을 만들거나 필터를 사용하여 배경을 그려야합니다. 또한 현재 신뢰할 수있는 교차 브라우저 행 줄 바꿈이 없습니다 (HTML <foreignObject>을 사용하지 않는 한).

<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200"> 
    <filter x="0" y="0" width="1" height="1" id="tooltipBackground"> 
    <feFlood flood-color="rgba(200,200,200,.5)"/> 
    <feComposite in="SourceGraphic"/> 
    </filter> 

    <circle r="50" cx="100" cy="100"> 
    <title>my tooltip</title> 
    </circle> 

    <script type="text/javascript"> 
    function showCircleTooltip(circle) { 
     var title = circle.getElementsByTagName("title")[0]; 
     if (title) { 
     var tooltip = document.createElementNS("http://www.w3.org/2000/svg","text"); 
     tooltip.textContent = title.textContent; 
     tooltip.setAttribute("filter","url(#tooltipBackground)"); 
     // We're putting the tooltip at the same place as the circle center. 
     // Modify this if you prefer different placement. 
     tooltip.setAttribute("x",circle.getAttribute("cx")); 
     tooltip.setAttribute("y",circle.getAttribute("cy")); 
     var transform = circle.getAttribute("transform"); 
     if (transform) { 
      tooltip.setAttribute("transform",transform); 
     } 
     circle.parentNode.insertBefore(tooltip, circle.nextSibling); 
     } 
    } 

    showCircleTooltip(document.getElementsByTagName("circle")[0]) 
    </script> 
</svg> 

Try out on Tinkerbin :

그래서, 여기에 시작점으로 거친 제안입니다.