SVG元素的Javascript工具提示

我有一个SVG，它作为一个带有一些标题的顶部栏。它由许多带有一些文本的矩形组成，我想在用户鼠标悬停时为每个矩形显示工具提示

我试图实现类似的功能，但我需要将.js代码保存在单独的文件中，因为我正在动态生成svg文件。但是，当我将鼠标移到元素（svg中的矩形）上时，什么也不会发生。我认为在脚本中引用我的svg可能会有问题，但我不确定哪里出了问题

下面是我的代码示例（为了保持可读性，我删除了一些不重要的部分）

SVG:

    <svg contentScriptType="text/ecmascript" width="760" 
    xmlns:xlink="http://www.w3.org/1999/xlink" zoomAndPan="magnify" contentStyleType="text/css"
    height="140" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg"
        onload="init(evt)" version="1.0">
    <script xlink:href="script.js" xlink:actuate="onLoad" xlink:type="simple" xlink:show="other" type="text/ecmascript" xmlns:xlink="http://www.w3.org/1999/xlink"/><rect x="0" width="120" height="140" y="0" 
    style="fill:#DEE7EF"/><rect x="120" y="0" width="30" style="fill:#9CAAC6" 
    onmouseout="HideTooltip(evt)" height="140" onmousemove="ShowTooltip(evt, 
    &apos;BlueServiceESB#BlueListener&apos;)"><text fill="black" x="0" id="tooltip" font-
    size="10" y="0" visibility="hidden">BlueServiceESB#BlueListener</text></rect></svg>

你能告诉我我做错了什么吗？非常感谢

首先，你应该使用“；”（style=“fill:#9CAAC6；”）在style属性和每个js代码中（onmouseout=“HideTooltip（evt）；）

2） 改变

到

3） 我认为使用jquery代替原生js是很容易的

一） 为您的形状添加id（在您的示例中为rect）

二） 制造

---

作为一个例子，我们来看看。工具提示在那里实现，正如我在上面写的。

删除init函数，每次只查找工具提示元素。因此，您的脚本将如下所示：

function ShowTooltip(evt, mouseovertext) {
    var tooltip = document.getElementById('tooltip');
    tooltip.setAttribute("x", evt.clientX + 11);
    tooltip.setAttribute("y", evt.clientY + 27);
    tooltip.firstChild.data = mouseovertext;
    tooltip.setAttribute("visibility", "visible");
}

function HideTooltip(evt) {
    var tooltip = document.getElementById('tooltip');
    tooltip.setAttribute("visibility", "hidden");
}

我认为SVG也有一些问题（可能是因为它的生成方式）。最重要的一点是不要将

文本

包装在

rect

元素中。这项工作：

    <svg width="760" height="140" xmlns="http://www.w3.org/2000/svg" version="1.0">

        <rect x="0" width="120" height="140" y="0" style="fill:#DEE7EF" />
        <rect x="120" y="0" width="30" height="140" style="fill:#9CAAC6"
            onmouseout="HideTooltip(evt)" 
            onmousemove="ShowTooltip(evt, &apos;BlueServiceESB#BlueListener&apos;)" />

        <text x="0" y="0" width="20" height="10" fill="black" id="tooltip" font-size="10"  visibility="hidden">BlueServiceESB#BlueListener</text>
    </svg>

BlueServiceESB#BlueListener

感谢您的回复，您能详细解释一下这部分吗？我正在用java生成我的svg代码，所以如果我不能很好地理解它，我就不能复制并尝试它（我使用的是Apache Batik）1）下载jQuery 2）为你的形状设置一个id属性3）添加js$（“#my#rect”）。on（'mouseover'，function（e）{//show tooltip here}）$（'my#rect'）.on（'mouseout'，函数（e）{//hide tooltip here}）；我不认为jQuery库是这个工作的正确工具。您建议为一个简单的

mouseover/mouseout

添加99%不必要的JavaScript。它不仅仅是mouseover/mouseout，addlistener也应该在这里使这个示例工作。jQuery使它更容易阅读。你是99%对的，但我认为Smajl在js中是新的。第1点是不正确的。您只需使用分号来分隔样式：

onmouseout="HideTooltip(evt); return false;"

$('#rect_id').on('mouseover',function(e){
   // do your stuff here
});
$('#rect_id').on('mouseout',function(e){
   // do your stuff here
});

function ShowTooltip(evt, mouseovertext) {
    var tooltip = document.getElementById('tooltip');
    tooltip.setAttribute("x", evt.clientX + 11);
    tooltip.setAttribute("y", evt.clientY + 27);
    tooltip.firstChild.data = mouseovertext;
    tooltip.setAttribute("visibility", "visible");
}

function HideTooltip(evt) {
    var tooltip = document.getElementById('tooltip');
    tooltip.setAttribute("visibility", "hidden");
}

    <svg width="760" height="140" xmlns="http://www.w3.org/2000/svg" version="1.0">

        <rect x="0" width="120" height="140" y="0" style="fill:#DEE7EF" />
        <rect x="120" y="0" width="30" height="140" style="fill:#9CAAC6"
            onmouseout="HideTooltip(evt)" 
            onmousemove="ShowTooltip(evt, &apos;BlueServiceESB#BlueListener&apos;)" />

        <text x="0" y="0" width="20" height="10" fill="black" id="tooltip" font-size="10"  visibility="hidden">BlueServiceESB#BlueListener</text>
    </svg>