1

タイトルが円のツールチップとして表示されるように、その下にsvg：title要素を持つsvg：circleがあります。プログラムで（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 に答える