Проблемы встраивания подсказок в SVG

Question

Я минималист и работаю на сайте, который имеет некоторые ограничения. По этим причинам мне нужны интерактивные всплывающие подсказки, когда люди наводят курсор на ключевые области моего SVG, но я также хочу внедрить эту интерактивность в сам SVG. Как дальнейшее осложнение, я не очень знаком с Javascript. Сначала я пытался сделать это только с помощью 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, но это крайний случай и легко обходится, большинство людейне помещайте скрипты в элементы switch.