Question

我有一个带有svg：title元素的svg：circle，以便标题显示为圆圈的工具提示。我如何以编程方式（使用javascript）显示并隐藏此工具提示？

Answer 1

由于无法以编程方式显示title元素本身，因此您必须创建一个<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

以编程方式显示SVG工具提示

1 个答案: