Question

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

因此，我开始研究Javascript，您也可以将其嵌入SVG。我真的很喜欢工具提示，这比使用title标签获得的提示要多得多。但是，仍然存在问题。

问题之一是以下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>

Answer 1

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

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

这是Firefox的一个bug，但这是一个极端情况，很容易解决，大多数人不会将脚本放在switch元素中。

在SVG中嵌入工具提示时出现问题

1 个答案: