如何在 SVG部件中定义的 SVG标签上显示工具提示?] >>> 我已经生成了一个HTML / SVG文件,该文件显示更多的相同的电子符号。 我现在搜索以显示tooltip,并将某些信息链接到所显示的SVG“符号”。 由于使用相同的符号多次,所以我在<defs>组的<svg>部分中定义了一个符号。 使用<use> SVG标签显示电子符号。 每个<use>标签后跟一个<html:div>标签,其中包含要在工具提示中显示的字符串。 我用来查找要在工具提示中显示的String的算法如下: 在MouseOver事件中,我搜索<use>标签的SIBLING元素 我检查同级元素是否是具有类名='info'的html:div元素 我将在html:div中找到的HTML部分放在工具提示元素中 我更改了工具提示的opacity属性,因此可见 问题(例如,案例1,2,4和5的问题是,在所有情况下,同级元素始终是<g>部分中定义的<defs>标签的同级和非 <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文件,该文件显示相同的电子符号的时间更长。我现在搜索以显示工具提示,其中包含一些与显示的SVG“符号”链接的信息。由于相同的符号是... 晚上之后,我发现了我的错误! 在Java代码中,我已替换为 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"); }); });

问题描述 投票:2回答:1

我已经生成了一个HTML / SVG文件,该文件显示更多的相同的电子符号。

我现在搜索以显示tooltip,并将某些信息链接到所显示的SVG“符号”。

由于使用相同的符号多次,所以我在<defs>组的<svg>部分中定义了一个符号。

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

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

我用来查找要在工具提示中显示的String的算法如下:

  1. 在MouseOver事件中,我搜索<use>标签的SIBLING元素
  2. 我检查同级元素是否是具有类名='info'的html:div元素
  3. 我将在html:div中找到的HTML部分放在工具提示元素中
  4. 我更改了工具提示的opacity属性,因此可见
  5. 问题(例如,案例1,2,4和5的问题是,在所有情况下,同级元素始终是<g>部分中定义的<defs>标签的同级和非 <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文件,该文件显示相同的电子符号的时间更长。我现在搜索以显示工具提示,其中包含一些与显示的SVG“符号”链接的信息。由于相同的符号是...

晚上之后,我发现了我的错误!

在Java代码中,我已替换为

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");
        });

});
html svg tooltip
1个回答
1
投票

晚上之后,我发现了我的错误!

© www.soinside.com 2019 - 2024. All rights reserved.