以編程方式顯示SVG工具提示

Question

我有一個svg：circle和一個svg：title元素，使得標題顯示爲圓圈的工具提示。我如何以編程方式（使用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。