时间戳

首页 > 解决方案 > 在 SVG 中嵌入工具提示的问题

javascript - 在 SVG 中嵌入工具提示的问题

问题描述

我是一个极简主义者，我在一个有一些限制的网站工作。由于这些原因，当人们将鼠标悬停在我的 SVG 的关键区域上时，我想要交互式工具提示，但我也希望将这种交互性嵌入到 SVG 本身中。更复杂的是，我对 Javascript 不是很熟悉。我最初尝试仅使用 CSS 来完成此操作，但不幸的是，我发现当您将 CSS 嵌入到 SVG 中时，您无法使用 CSS 的所有功能。它是您可以使用的子集，并且该子集不会为您提供那些很棒的工具提示。

所以我开始研究 Javascript，你也可以将它嵌入到 SVG 中。我真的很喜欢我获得的工具提示，而不是使用标题标签获得的工具提示。但是，仍然存在问题。

问题之一是以下 SVG 文件在 Chrome 中呈现，而不是在 Firefox 中呈现。Firefox 根本不渲染它，我无法确定原因。

另一个问题是，即使它在 Chrome 中呈现，我仍然有问题，因为我需要一些相当长的工具提示。而且这里的多行工具提示处理得不好。任何提示表示赞赏！

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg id="oidc" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 422 339.2">
  <style type="text/css">
    .st13 {
        fill:#d9489b
    }
    .st13:hover {
        cursor:help;
        fill:#E66E31;
    }
    #tooltip {
          dominant-baseline: hanging;
          font-size: 8px;
      }
  </style>
  <switch>
    <g>
    <g>
      <circle class="st13" cx="47.8" cy="69.2" r="6" data-tooltip-text="I am some fairly long text." />
      <circle class="st13" cx="321.2" cy="65.7" r="6" data-tooltip-text="I am some much much much much much much longer text, so long that I cannot discuss or itemize my exact length....it's looooong, very long. I can't say more."/>
    </g>
    <g id="tooltip" visibility="hidden" transform="translate(87.9511512134412 127.90914747977598)">
      <rect x="2" y="2" width="52.90066909790039" height="24" fill="black" opacity="0.4" rx="2" ry="2"></rect>
      <rect width="52.90066909790039" height="24" fill="lightblue" rx="2" ry="2"></rect>
      <text x="4" y="6">A box</text>
    </g>
  </g>
    <script type="text/ecmascript">
  (function() {
      var svg = document.getElementById("oidc");
      var tooltip = svg.getElementById("tooltip");
      var tooltipText = tooltip.getElementsByTagName("text")[0];
      var tooltipRects = tooltip.getElementsByTagName("rect");
      var triggers = svg.getElementsByClassName("st13");

      for (var i = 0; i &lt; triggers.length; i++) {
        triggers[i].addEventListener("mousemove", showTooltip);
        triggers[i].addEventListener("mouseout", hideTooltip);
      }

      function showTooltip(evt) {
        var CTM = svg.getScreenCTM();
        var x = (evt.clientX - CTM.e + 6) / CTM.a;
        var y = (evt.clientY - CTM.f + 20) / CTM.d;
        tooltip.setAttributeNS(null, "transform", "translate(" + x + " " + y + ")");
        tooltip.setAttributeNS(null, "visibility", "visible");

        tooltipText.firstChild.data = evt.target.getAttributeNS(null, "data-tooltip-text");
        var length = tooltipText.getComputedTextLength();
        for (var i = 0; i &lt; tooltipRects.length; i++) {
          tooltipRects[i].setAttributeNS(null, "width", length + 8);
        }
      }

      function hideTooltip(evt) {
        tooltip.setAttributeNS(null, "visibility", "hidden");
      }
    })()
    </script>
  </switch>
</svg>

标签： javascriptcsssvg

解决方案

将<script>元素及其内容移到<switch>元素外。

您根本不需要该<switch>元素，因此您可以简单地将其完全删除。

这是一个 Firefox 错误，但它是一个边缘案例并且很容易解决，大多数人不会将脚本放在 switch 元素中。

推荐阅读