工具提示未显示在 SVG 中使用 ECMAScript

如何解决工具提示未显示在 SVG 中使用 ECMAScript

我正在尝试将 ECMAScript 嵌入到 XML 中。我在网上找到了 this tutorial。我在本地尝试了他们的代码以确认它有效，然后尝试以此为基础创建工具提示功能。

最后，这是我的代码：

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="6cm" height="5cm" viewBox="0 0 600 500" xmlns="http://www.w3.org/2000/svg" version="1.1">
  <!-- ECMAScript to change the radius with each click -->
  <script type="application/ecmascript"> <![CDATA[
        function showTooltip(evt,text) {
            let tooltip = document.getElementById("tooltip");
            tooltip.innerHTML = text;
            tooltip.style.display = "block";
            tooltip.style.left = evt.pageX + 10 + 'px';
            tooltip.style.top = evt.pageY + 10 + 'px';
        }
        function hidetooltip() {
            var tooltip = document.getElementById("tooltip"); 
            tooltip.style.display = "none";
        }
  ]]> </script>

  <!-- Outline the drawing area with a blue line -->
  <rect x="1" y="1" width="598" height="498" fill="none" stroke="blue"/>

  <!-- Act on each click event -->
  <circle onmousemove="showTooltip(evt,'some text')" onmouSEOut="hidetooltip()" cx="300" cy="225" r="100"
          fill="red"/>

  <text x="300" y="480" 
        font-family="Verdana" font-size="35" text-anchor="middle">

    Hover over circle for tooltip
  </text>
</svg>

但是工具提示功能不起作用 - 当您将鼠标悬停在圆圈上时没有任何反应。

我有点困惑为什么它不起作用 - 毕竟，唯一的主要变化是被调用的函数。

这是我尝试过的：

• 在纯 HTML 中模拟工具提示逻辑，并且有效
• 保留他们的教程代码 javascript 函数，但将 onclick 属性更改为 onmouSEOver，这有效

基于此，我认为这与我调用 showTooltip 的方式有关，但我不确定它到底是什么。希望得到一些帮助调试和解决问题：D

解决方法

只需将带有“工具提示”ID 的 DIV 元素添加到您的文档中即可。

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="6cm" height="5cm" viewBox="0 0 600 500" xmlns="http://www.w3.org/2000/svg" version="1.1">
  <!-- ECMAScript to change the radius with each click -->
  <script type="application/ecmascript"> <![CDATA[
        function showTooltip(evt,text) {
            let tooltip = document.getElementById("tooltip");
            tooltip.innerHTML = text;
            tooltip.style.display = "block";
            tooltip.style.left = evt.pageX + 10 + 'px';
            tooltip.style.top = evt.pageY + 10 + 'px';
        }
        function hideTooltip() {
            var tooltip = document.getElementById("tooltip"); 
            tooltip.style.display = "none";
        }
  ]]> </script>

  <!-- Outline the drawing area with a blue line -->
  <rect x="1" y="1" width="598" height="498" fill="none" stroke="blue"/>

  <!-- Act on each click event -->
  <circle onmousemove="showTooltip(evt,'some text')" onmouseout="hideTooltip()" cx="300" cy="225" r="100"
          fill="red"/>

  <text x="300" y="480" 
        font-family="Verdana" font-size="35" text-anchor="middle">

    Hover over circle for tooltip
  </text>
</svg>
<div id="tooltip" style="position: absolute; left: 300px; top: 300px"></div>