Я сгенерировал файл HTML / SVG, который больше времени отображает одни и те же электрические символы.
Сейчас я ищу, чтобы отобразить tooltip с некоторой информацией, связанной с отображаемым SVG-символом.
Поскольку один и тот же символ используется чаще, я определил символ в <defs> части в <svg> blo c.
Электрический символ отображается с помощью <use> SVG-тега.
Каждый тег <use> сопровождается тегом <html:div>, который содержит строку для отображения во всплывающей подсказке.
Алгоритм, который я использую, чтобы найти строку для отображения во всплывающей подсказке, следующий:
- в событии MouseOver, я ищу элемент SIBLING тега
<use> - Я проверяю, является ли элемент родственного элемента
html:div элементом с namename = 'info' - Я положил HTML часть найдена в
html:div в элементе всплывающей подсказки - Я изменяю
opacity атрибут всплывающей подсказки, чтобы он был виден
Проблема (примеры 1,2,4 и 5 в примере ) заключается в том, что во всех ситуациях элемент-брат всегда является элементом-тегом <g>, определенным в * 1 034 * part а не родственный элемент тега <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>