1

我有一个 svg:circle，它下面有一个 svg:title 元素，这样标题就显示为圆的工具提示。如何以编程方式（使用 javascript）显示和隐藏此工具提示？

4

1 回答 1

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>

在 Tinkerbin 上试用。

于 2013-01-12T12:21:24.583 回答