如何在 <defs> SVG 部分中定义的 <use> SVG 标签上显示工具提示？答案

【问题标题】：How to display a tooltip on a <use> SVG tag that has been defined in a <defs> SVG part?如何在 <defs> SVG 部分中定义的 <use> SVG 标签上显示工具提示？
【发布时间】：2020-03-23 15:55:19
【问题描述】：

我已经生成了一个 HTML/SVG 文件，它可以更长时间地显示相同的电气符号。

我现在搜索显示tooltip，其中包含一些与显示的 SVG“符号”相关的信息。

由于相同的符号被多次使用，我在<defs>部分定义了一个符号<svg> bloc。

电气符号使用<use> SVG 标签显示。

每个<use> 标记后跟一个<html:div> 标记，其中包含要在工具提示中显示的字符串。

我用来查找要在工具提示中显示的字符串的算法如下：

在 MouseOver 事件中，我搜索 <use> 标签的 SIBLING 元素
我检查兄弟元素是否是 html:div 元素，类名 = 'info'
我将在html:div 中找到的 HTML 部分放入工具提示元素中
我更改了工具提示的opacity 属性，使其可见

问题（示例中的情况 1、2、4 和 5）是，在所有情况下，兄弟元素始终是在 <defs> 部分中定义的 <g> 标记的兄弟元素，而不是的兄弟元素<use> 标签。

我的算法仅适用于案例 3。

在这种情况下，我已将<use> 标记替换为<defs> 部分中定义的标记。

问题：如何将工具提示添加到<use> 标记或使用<use> 标记？

$(document).ready(function() {

var tooltip = d3.select("div.tooltip");

d3.select("svg").selectAll("g")
    .on("mouseover", function ()
        {
        var sTooltip = "Tooltip: ?";
		
        if (this.id.startsWith("u"))
            {
            sId = this.id + "info";
            var e = document.getElementById(sId);
            if (e != null)
                {
                sTooltip = e.innerHTML;
                }
            }
        else
            {		
            var e = this.nextElementSibling;
            if (e != null)
                {
                if (e.className.baseVal == "info")
                    {
                    sTooltip = e.innerHTML;
                    }
                }
            }
			
        document.getElementById('tooltip').innerHTML = sTooltip;
        tooltip.style("opacity", "1");
        })

    .on("mousemove", function ()
        {
        tooltip.style("left", (d3.event.pageX + 10) + "px");
        tooltip.style("top", (d3.event.pageY + 10) + "px");
        })

    .on("mouseout", function ()
        {
        return tooltip.style("opacity", "0");
        });

});

.tooltip {
    pointer-events:none;
    opacity: 0;
    transition: opacity 0.4s;
    padding-left: 10px;
    padding-right: 10px;
    }

div.tooltip {
    background: yellow;
    border:solid gray;
    position: absolute;
    max-width: 300px;
    text-align:center;
    }
svg {
    margin:10px 20px;
    overflow:visible; 
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<p>
<b>Electricité: plan Unifilaire</b>
</p>
<svg xmlns='http://www.w3.org/2000/svg' version='2.0' width='8000px' height='6000px'>
<defs>
  <g id="prise">
    <path d="m40,-20 a20,20 0 0,0 0,40 z" fill="white" stroke="white" stroke-width="2" />
    <line x1="0" y1="0" x2="20" y2="0" stroke="blue" stroke-width="2" />
    <line x1="20" y1="-15" x2="20" y2="15" stroke="blue" stroke-width="2" />
    <path d="m40,-20 a20,20 0 0,0 0,40" fill="white" stroke="blue" stroke-width="2" />
    <line x1="40" y1="-20" x2="40" y2="-28" stroke="blue" stroke-width="2" />
    <line x1="40" y1="20" x2="40" y2="28" stroke="blue" stroke-width="2" />
  </g>
</defs>

<text x='50' y='40' font-size='20'>1.</text>
<use href='#prise' x='100' y='40'/>

<text x='50' y='100' font-size='20'>2.</text>
<use href='#prise' x='100' y='100'/>
<html:div class="info">
    prise à droite de la porte de la chambre Est
</html:div>

<text x='50' y='160' font-size='20'>3.</text>
<g id="interrupteur" transform="translate(100 160)">
  <path d="m40,-20 a20,20 0 0,0 0,40 z" fill="white" stroke="white" stroke-width="2" />
  <line x1="0" y1="0" x2="20" y2="0" stroke="red" stroke-width="2" />
  <line x1="20" y1="-15" x2="20" y2="15" stroke="red" stroke-width="2" />
  <path d="m40,-20 a20,20 0 0,0 0,40" fill="white" stroke="red" stroke-width="2" />
  <line x1="40" y1="-20" x2="40" y2="-28" stroke="red" stroke-width="2" />
  <line x1="40" y1="20" x2="40" y2="28" stroke="red" stroke-width="2" />
</g>
<html:div class="info">
  interrupteur de la lampe de la cuisine
</html:div>

<text x='50' y='220' font-size='20'>4.</text>
<g>
<use href='#prise' x='100' y='220' stroke='green'/>
<text font-size="12" style="display:none">prise de la machine à laver à la cave</text>
</g>

<text x='50' y='280' font-size='20'>5.</text>
<use id='u258' href='#prise' x='100' y='280'/>
<html:div id="u258info">
  prise de la machine à laver à la cave
</html:div>
  
</svg>

<div id="tooltip" class="tooltip">
  Tooltip: ?
</div>

</body>
</html>

【问题讨论】：

标签： html svg tooltip

【解决方案1】：

一夜之间，我发现了我的错误！

在Javascript代码中，我已经替换了

d3.select("svg").selectAll("g")

由

d3.select("svg").selectAll("use")

现在只有案例 2 和 5 可以正常工作。

现在，在我的工作中，我将使用以下 JavaScript 代码

$(document).ready(function() {

var tooltip = d3.select("div.tooltip");

d3.select("svg").selectAll("use")
    .on("mouseover", function ()
        {
        var sTooltip = "Tooltip: ?";

        var e = this.nextElementSibling;
        if (e != null)
            {
            if (e.className.baseVal == "info")
                {
                sTooltip = e.innerHTML;
                }
            }

        document.getElementById('tooltip').innerHTML = sTooltip;
        tooltip.style("opacity", "1");
        })

    .on("mousemove", function ()
        {
        tooltip.style("left", (d3.event.pageX + 10) + "px");
        tooltip.style("top", (d3.event.pageY + 10) + "px");
        })

    .on("mouseout", function ()
        {
        return tooltip.style("opacity", "0");
        });

});

【讨论】：