Javascript SVG元素上的工具提示未显示

尝试编写一个映射，该映射在SVG元素的鼠标上方显示名称，并在单击时调出一个模式。我只是试着像这里描述的那样向显示名称添加工具提示：但是没有出现任何东西，我不清楚为什么。我更改了所有变量名，使它们与我的文档匹配。这是地图：

我使用的脚本是：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 200" id="tooltip-svg-3">
<style>
    #tooltip {
        dominant-baseline: hanging; 
    }
</style>

<rect x="40" y="50" width="80" height="100" fill="#007bbf" class="tooltip-trigger"/>
<rect x="180" y="50" width="80" height="100" fill="#ec008c" class="tooltip-trigger"/>
<text id="tooltip" x="0" y="0" visibility="hidden" >Tooltip</text>

<script type="text/ecmascript"><![CDATA[
    (function() {
        var svg = document.getElementById('tooltip-svg-3');
        var tooltip = svg.getElementById('tooltip');
        var triggers = svg.getElementsByClassName('tooltip-trigger');

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

        function showTooltip(evt) {
            var CTM = svg.getScreenCTM();
            var mouseX = (evt.clientX - CTM.e) / CTM.a;
            var mouseY = (evt.clientY - CTM.f) / CTM.d;
            tooltip.setAttributeNS(null, "x", mouseX + 6 / CTM.a);
            tooltip.setAttributeNS(null, "y", mouseY + 20 / CTM.d);
            tooltip.setAttributeNS(null, "visibility", "visible");
            var mouseY = (evt.clientY - CTM.f) / CTM.d;
            tooltip.firstChild.data = evt.target.getAttributeNS(null, "fill");
        }

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

#工具提示{
优势基线：悬挂；
}
工具提示

---

我从最初的代码和Vlad274提供的提示反向工作后发现了这一点，以下是一个答案，以防将来它对任何人都有帮助：

去掉了

div

标记

在svg中的元素结尾和脚本之间添加了一行

工具提示

在脚本中，将

svg

变量设置为

svg

的

id

，将

tooltip

变量设置为“tooltip”，将

trigger

变量设置为贴图管脚的类名

为每个管脚添加名称属性，并设置：

tooltip.firstChild.data=evt.target.getAttributeNS（null，“name”）； }

---

下面是更新后的JSFIDLE（工具提示没有格式化，但应该更简单）：

欢迎使用StackOverflow！您发布的示例JSFIDLE有一些错误（我怀疑这是您问题的根源）。在浏览器控制台中，我看到以下错误“svg.getElementById不是函数”。导致此错误的原因是，在JSFIDLE中，变量

svg

获取了

div

元素，但在问题的示例代码中，它获取了

svg

元素。谢谢！我明白你的意思，但当我去掉div元素时，什么也没发生。以下是更新的JSFIDLE:。我真的很感谢你的帮助！我正在努力学习做这件事，但我想我还太早，甚至没有意识到我做错了什么。我只是提到这一点，因为你是新手，只是在学习，你可能不知道如何使用控制台进行调试。您可以点击

F12

打开浏览器开发工具。此处的一个选项卡标题为“控制台”。一般来说，这里会显示错误。如果您想输出自定义消息（甚至整个对象！）以帮助调试，您只需编写

console.log（“blah”）

。您甚至可以使用开发人员工具设置断点并逐行遍历代码。您最新的小提琴仍然显示出一些错误，但我对JSFIDLE不够熟悉，无法帮助您解决问题！非常感谢你！我会在评论中自己回答这个问题，以备参考，以防对其他人有所帮助哈哈。