Я сгенерировал SVG, который отображает всплывающую подсказку каждый раз, когда указатель мыши находится над элементом <use>.
Моя проблема заключается в том, что всплывающая подсказка с «одинаковым» текстом / длиной отображается по-разному.
Когда мышь перемещается над элементом <use>, расположенным в левой части SVG, текст во всплывающей подсказке отображается в одной строке.
Когда мышь перемещается над элементом <use> в правой части текст отображается в несколько строк!
Когда я уменьшаю изображение, чтобы уменьшить изображение, чтобы на моем 23-дюймовом экране отображался полный SVG, все подсказки отображаются только на одной строке!
Что происходит?
Как мне разрешить этот странный случай?
PS: сначала я вставил Snipped, но воспроизвести мою ошибку с помощью Snipped не так просто, потому что экран результатов немного меньше.
Итак, я решил удалить код Snipped и поставить полный SVG в этом вопросе.
Чтобы воспроизвести ошибку, необходимо
- марка a Вставка / Копирование кода в пустой. html файл
- двойной щелчок по файлу для загрузки Chrome или Opera или Firefox browser
- наведите курсор мыши на первое устройство в строке F (где строка прерывается и отображается 16А), как это
- прокрутка вправо
- наведите курсор мыши на первое устройство в строке R, как это
Вы можете видеть, что первая подсказка отображается в 1 строке, а вторая использует больше 10 строк!
Теперь вы можете уменьшать изображение, чтобы уменьшить изображение до тех пор, пока на экране не отобразится полное изображение Если сейчас вы наводите мышь на одно и то же устройство, обе подсказки отображаются в 1 строке.
Для соблюдения предельного размера вопроса я уменьшил исходный SVG. Прерыватель теперь является прямоугольником, но проблема уже существует.
Содержимое моего файла HTML выглядит следующим образом ...
<?xml version="1.0" encoding="UTF-8" ?>
<html xmlns:svg="http://www.w3.org/2000/svg">
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script type="text/javascript" src="https://d3js.org/d3.v4.min.js"></script>
<title>Plan unifilaire</title>
<style type="text/css">
#tooltip {
background: yellow;
border:solid gray;
position: absolute;
max-width: 800px;
text-align:left;
transition: opacity 0.4s;
pointer-events:none;
opacity: 0;
padding: 4px;
font-family: Arial;
font-size: 14;
}
svg {
margin:10px 20px;
overflow:visible;
}
line {
stroke:blue;
stroke-width:2;
}
rect {
stroke:blue;
stroke-width:2;
}
circle {
stroke:blue;
stroke-width:2;
}
text {
font-family: Arial;
}
</style>
</head>
<body>
<script type="text/JavaScript">
$(document).ready(function() {
var tooltip = d3.select("#tooltip");
d3.select("svg").selectAll("use")
.on("mouseover", function ()
{
var sTooltip = "";
var e = this.nextElementSibling;
if (e != null)
{
if (e.className.baseVal == "info")
{
sTooltip = e.innerHTML;
}
}
if (sTooltip == "")
{
sTooltip = this.href.baseVal;
}
if (sTooltip == "")
{
sTooltip = "? Tooltip";
}
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");
});
});
</script>
<svg xmlns="http://www.w3.org/2000/svg" version="2.0" width="8000px" height="6000px">
<defs>
<g id="differentiel">
<rect x="-5" y="0" width="40" height="40" fill="red" stroke="none" stroke-width="0" fill-opacity="0.0" />
<g transform="rotate(-20,0,0)">
<polyline points="0 0 0 40 5 40 5 35 0 35" fill="none"/>
</g>
</g>
<g id="prise">
<path d="m40,-20 a20,20 0 0,0 0,40 z" fill="white" stroke="white"/>
<line x1="0" y1="0" x2="20" y2="0" stroke="blue"/>
<line x1="20" y1="-15" x2="20" y2="15" stroke="blue"/>
<path d="m40,-20 a20,20 0 0,0 0,40" fill="none" stroke="blue"/>
<line x1="40" y1="-20" x2="40" y2="-28" stroke="blue"/>
<line x1="40" y1="20" x2="40" y2="28" stroke="blue"/>
</g>
<g id="connexion">
<rect x="0" y="-10" width="20" height="20" stroke="blue"fill="white" />
</g>
<g id="lampe">
<circle cx="0" cy="0" r="15" stroke="none" fill="red" fill-opacity="0.0" />
<line x1="-10" y1="-10" x2="10" y2="10" stroke="blue"/>
<line x1="10" y1="-10" x2="-10" y2="10" stroke="blue"/>
</g>
<g id="int-unipolaire">
<circle cx="10" cy="0" r="10" fill="none" />
<g transform="rotate(-60 10 0)">
<line x1="20" y1="0" x2="50" y2="0" stroke="blue"/>
<line x1="50" y1="0" x2="50" y2="5" stroke="blue"/>
</g>
</g>
<g id="int-va-et-vient">
<circle cx="10" cy="0" r="10" stroke="blue"fill="none" />
<g transform="rotate(-60 10 0)">
<line x1="20" y1="0" x2="50" y2="0" stroke="blue"/>
<line x1="50" y1="0" x2="50" y2="5" stroke="blue"/>
<line x1="0" y1="0" x2="-30" y2="0" stroke="blue"/>
<line x1="-30" y1="0" x2="-30" y2="-5" stroke="blue"/>
</g>
</g>
<g id="radiateur">
<rect x="0" y="-15" width="60" height="30" stroke="blue"fill-opacity="0.0" />
<path d="m0,0 l5,0 l 5,-10 l 10,20 l 10,-20 l 10,20 l 10,-20 l 5,10 l5,0" fill="none" stroke="black" stroke-width="1" />
</g>
<g id="volet">
<rect x="0" y="-20" width="40" height="40" stroke="blue"fill-opacity="0.0" />
<path d="M0,-15 h 40 M0,-10 h 40 M0,-5 h 40 M0,0 h 40 M0,5 h40" fill="none" stroke="black" stroke-width="1" />
</g>
</defs>
<line x1='100' y1='130' x2='100' y2='170'/>
<line x1='100' y1='170' x2='100' y2='210'/>
<text x ='110' y='190' fill='black' font-size='20'>A</text>
<text x ='110' y='220' fill='black' font-size='12'>10A</text>
<use href='#differentiel' x='100' y='210'/>
<html:div class='info'>
A: éclairage rez-de-chaussée
</html:div>
<line x1='100' y1='250' x2='100' y2='330'/>
<text x='90' y='334' fill='black' font-size='16' text-anchor='end'>A1</text>
<line x1='100' y1='330' x2='120' y2='330'/>
<use href='#int-unipolaire' x='120' y='330'/>
<line x1='140' y1='330' x2='180' y2='330'/>
<use href='#lampe' x='180' y='330'/>
<html:div class='info'>
lampe salon
</html:div>
<line x1='100' y1='170' x2='250' y2='170'/>
<line x1='250' y1='170' x2='250' y2='210'/>
<text x ='260' y='190' fill='black' font-size='20'>B</text>
<text x ='260' y='220' fill='black' font-size='12'>10A</text>
<use href='#differentiel' x='250' y='210'/>
<html:div class='info'>
B: éclairage Etage + Cave + Hall + WC + cagibi +
</html:div>
<line x1='250' y1='250' x2='250' y2='330'/>
<text x='240' y='334' fill='black' font-size='16' text-anchor='end'>B1</text>
<line x1='250' y1='330' x2='270' y2='330'/>
<use href='#int-va-et-vient' x='270' y='330'/>
<use href='#int-va-et-vient' x='290' y='330'/>
<line x1='310' y1='330' x2='350' y2='330'/>
<use href='#lampe' x='350' y='330'/>
<html:div class='info'>
lampe Hall dans l'entrée
</html:div>
<line x1='250' y1='170' x2='440' y2='170'/>
<line x1='440' y1='170' x2='440' y2='210'/>
<text x ='450' y='190' fill='black' font-size='20'>C</text>
<text x ='450' y='220' fill='black' font-size='12'>25A</text>
<use href='#differentiel' x='440' y='210'/>
<html:div class='info'>
C: triphasé cuisine
</html:div>
<line x1='440' y1='250' x2='440' y2='330'/>
<text x ='430' y='334' fill='black' font-size='16' text-anchor='end'>C1</text>
<line x1='440' y1='330' x2='460' y2='330'/>
<use href='#connexion' x='460' y='330'/>
<line x1='480' y1='330' x2='500' y2='330'/>
<line x1='500' y1='330' x2='520' y2='330'/>
<use href='#four-classique' x='520' y='330'/>
<html:div class='info'>
four Siemens
</html:div>
<line x1='440' y1='330' x2='440' y2='410'/>
<text x ='430' y='414' fill='black' font-size='16' text-anchor='end'>C2</text>
<line x1='440' y1='410' x2='460' y2='410'/>
<use href='#connexion' x='460' y='410'/>
<line x1='480' y1='410' x2='500' y2='410'/>
<line x1='500' y1='410' x2='520' y2='410'/>
<use href='#micro-onde' x='520' y='410'/>
<html:div class='info'>
micro-onde Siemens
</html:div>
<line x1='440' y1='170' x2='620' y2='170'/>
<line x1='620' y1='170' x2='620' y2='210'/>
<text x ='630' y='190' fill='black' font-size='20'>D</text>
<text x ='630' y='220' fill='black' font-size='12'>25A</text>
<use href='#differentiel' x='620' y='210'/>
<html:div class='info'>
D: triphasé garage + remise
</html:div>
<line x1='620' y1='250' x2='620' y2='330'/>
<text x ='610' y='334' fill='black' font-size='16' text-anchor='end'>D1</text>
<use href='#prise' x='620' y='330'/>
<html:div class='info'>
triphasé garage
</html:div>
<line x1='620' y1='170' x2='700' y2='170'/>
<line x1='700' y1='170' x2='700' y2='210'/>
<text x ='710' y='190' fill='black' font-size='20'>E</text>
<text x ='710' y='220' fill='black' font-size='12'>16A</text>
<use href='#differentiel' x='700' y='210'/>
<html:div class='info'>
E: éclairage et 2 prises dans salle de bain principale
</html:div>
<line x1='700' y1='250' x2='700' y2='330'/>
<text x='690' y='334' fill='black' font-size='16' text-anchor='end'>E1</text>
<line x1='700' y1='330' x2='720' y2='330'/>
<use href='#int-unipolaire' x='720' y='330'/>
<line x1='740' y1='330' x2='780' y2='330'/>
<use href='#lampe' x='780' y='330'/>
<html:div class='info'>
lampe salle de bain
</html:div>
<line x1='700' y1='330' x2='700' y2='410'/>
<text x ='690' y='414' fill='black' font-size='16' text-anchor='end'>E2</text>
<use href='#prise' x='700' y='410'/>
<html:div class='info'>
bloc prises à gauche de la colonne de descente d'eau
</html:div>
<use href='#prise' x='720' y='410'/>
<html:div class='info'>
bloc prises à gauche de la colonne de descente d'eau
</html:div>
<line x1='700' y1='170' x2='850' y2='170'/>
<line x1='850' y1='170' x2='850' y2='210'/>
<text x ='860' y='190' fill='black' font-size='20'>F</text>
<text x ='860' y='220' fill='black' font-size='12'>16A</text>
<use href='#differentiel' x='850' y='210'/>
<html:div class='info'>
F: Salle-de-bain ETAGE + prise TV + prise PC bureau
</html:div>
<line x1='850' y1='250' x2='850' y2='330'/>
<text x ='840' y='334' fill='black' font-size='16' text-anchor='end'>F1</text>
<use href='#prise' x='850' y='330'/>
<html:div class='info'>
prise TV au Salon
</html:div>
<line x1='850' y1='330' x2='850' y2='410'/>
<text x ='840' y='414' fill='black' font-size='16' text-anchor='end'>F2</text>
<use href='#prise' x='850' y='410'/>
<html:div class='info'>
prise PC au Bureau
</html:div>
<line x1='850' y1='170' x2='1030' y2='170'/>
<line x1='1030' y1='170' x2='1030' y2='210'/>
<text x ='1040' y='190' fill='black' font-size='20'>G</text>
<text x ='1040' y='220' fill='black' font-size='12'>16A</text>
<use href='#differentiel' x='1030' y='210'/>
<html:div class='info'>
G: Salle-de-bain PRINCIPALE + Bloc machines à laver
</html:div>
<line x1='1030' y1='250' x2='1030' y2='330'/>
<text x ='1020' y='334' fill='black' font-size='16' text-anchor='end'>G1</text>
<use href='#prise' x='1030' y='330'/>
<html:div class='info'>
bloc de prises à l'évier
</html:div>
<use href='#prise' x='1050' y='330'/>
<html:div class='info'>
bloc de prises à l'évier
</html:div>
<line x1='1030' y1='330' x2='1030' y2='410'/>
<text x ='1020' y='414' fill='black' font-size='16' text-anchor='end'>G2</text>
<use href='#prise' x='1030' y='410'/>
<html:div class='info'>
lampe meuble
</html:div>
<line x1='1030' y1='410' x2='1030' y2='490'/>
<text x ='1020' y='494' fill='black' font-size='16' text-anchor='end'>G3</text>
<use href='#prise' x='1030' y='490'/>
<html:div class='info'>
bloc de prises au petit garage à gauche de l'évier
</html:div>
<use href='#prise' x='1050' y='490'/>
<html:div class='info'>
bloc de prises au petit garage à gauche de l'évier
</html:div>
<use href='#prise' x='1070' y='490'/>
<html:div class='info'>
bloc de prises au petit garage à gauche de l'évier
</html:div>
<use href='#prise' x='1090' y='490'/>
<html:div class='info'>
bloc de prises au petit garage à gauche de l'évier
</html:div>
<line x1='1030' y1='170' x2='1170' y2='170'/>
<line x1='1170' y1='170' x2='1170' y2='210'/>
<text x ='1180' y='190' fill='black' font-size='20'>H</text>
<text x ='1180' y='220' fill='black' font-size='12'>16A</text>
<use href='#differentiel' x='1170' y='210'/>
<html:div class='info'>
H: ?
</html:div>
<line x1='1170' y1='170' x2='1230' y2='170'/>
<line x1='1230' y1='170' x2='1230' y2='210'/>
<text x ='1240' y='190' fill='black' font-size='20'>I</text>
<text x ='1240' y='220' fill='black' font-size='12'>16A</text>
<use href='#differentiel' x='1230' y='210'/>
<html:div class='info'>
I: chambre étage Ouest (Signeulx)
</html:div>
<line x1='1230' y1='250' x2='1230' y2='330'/>
<text x ='1220' y='334' fill='black' font-size='16' text-anchor='end'>I1</text>
<use href='#prise' x='1230' y='330'/>
<html:div class='info'>
prise à gauche de la porte
</html:div>
<line x1='1230' y1='330' x2='1230' y2='410'/>
<text x ='1220' y='414' fill='black' font-size='16' text-anchor='end'>I2</text>
<use href='#prise' x='1230' y='410'/>
<html:div class='info'>
prise radiateur en dessous de la fenêtre
</html:div>
<line x1='1230' y1='410' x2='1270' y2='410'/>
<line x1='1270' y1='410' x2='1290' y2='410'/>
<use href='#radiateur' x='1290' y='410'/>
<html:div class='info'>
radiateur Siemens
</html:div>
<line x1='1230' y1='410' x2='1230' y2='490'/>
<text x ='1220' y='494' fill='black' font-size='16' text-anchor='end'>I3</text>
<line x1='1230' y1='490' x2='1250' y2='490'/>
<use href='#connexion' x='1250' y='490'/>
<line x1='1270' y1='490' x2='1290' y2='490'/>
<line x1='1290' y1='490' x2='1310' y2='490'/>
<use href='#volet' x='1310' y='490'/>
<html:div class='info'>
volet
</html:div>
<line x1='1230' y1='490' x2='1230' y2='570'/>
<text x ='1220' y='574' fill='black' font-size='16' text-anchor='end'>I4</text>
<use href='#prise' x='1230' y='570'/>
<html:div class='info'>
bloc de prises à gauche de la paque de cuisson en vitrocéramique
</html:div>
<use href='#prise' x='1250' y='570'/>
<html:div class='info'>
bloc de prises à gauche de la paque de cuisson en vitrocéramique
</html:div>
<use href='#prise' x='1270' y='570'/>
<html:div class='info'>
bloc de prises à gauche de la paque de cuisson en vitrocéramique
</html:div>
<line x1='1230' y1='170' x2='1410' y2='170'/>
<line x1='1410' y1='170' x2='1410' y2='210'/>
<text x ='1420' y='190' fill='black' font-size='20'>J</text>
<text x ='1420' y='220' fill='black' font-size='12'>16A</text>
<use href='#differentiel' x='1410' y='210'/>
<html:div class='info'>
J: Prises bloc de cuisson
</html:div>
<line x1='1410' y1='250' x2='1410' y2='330'/>
<text x ='1400' y='334' fill='black' font-size='16' text-anchor='end'>J1</text>
<use href='#prise' x='1410' y='330'/>
<html:div class='info'>
bloc de prises à droite de la plaque de cuisson en vitrocéramique
</html:div>
<use href='#prise' x='1430' y='330'/>
<html:div class='info'>
bloc de prises à droite de la plaque de cuisson en vitrocéramique
</html:div>
<use href='#prise' x='1450' y='330'/>
<html:div class='info'>
bloc de prises à droite de la plaque de cuisson en vitrocéramique
</html:div>
<line x1='1410' y1='170' x2='1530' y2='170'/>
<line x1='1530' y1='170' x2='1530' y2='210'/>
<text x ='1540' y='190' fill='black' font-size='20'>K</text>
<text x ='1540' y='220' fill='black' font-size='12'>16A</text>
<use href='#differentiel' x='1530' y='210'/>
<html:div class='info'>
K: lave-vaisselle
</html:div>
<line x1='1530' y1='250' x2='1530' y2='330'/>
<text x ='1520' y='334' fill='black' font-size='16' text-anchor='end'>K1</text>
<use href='#prise' x='1530' y='330'/>
<html:div class='info'>
prise lave-vaisselle
</html:div>
<line x1='1530' y1='170' x2='1610' y2='170'/>
<line x1='1610' y1='170' x2='1610' y2='210'/>
<text x ='1620' y='190' fill='black' font-size='20'>L</text>
<text x ='1620' y='220' fill='black' font-size='12'>16A</text>
<use href='#differentiel' x='1610' y='210'/>
<html:div class='info'>
L: prise LIVING + CUISINE + CAVE
</html:div>
<line x1='1610' y1='250' x2='1610' y2='330'/>
<text x ='1600' y='334' fill='black' font-size='16' text-anchor='end'>L1</text>
<use href='#prise' x='1610' y='330'/>
<html:div class='info'>
bloc de 2 prises à droite de la fenêtre Salon
</html:div>
<use href='#prise' x='1630' y='330'/>
<html:div class='info'>
bloc de 2 prises à droite de la fenêtre Salon
</html:div>
<line x1='1610' y1='170' x2='1850' y2='170'/>
<line x1='1850' y1='170' x2='1850' y2='210'/>
<text x ='1860' y='190' fill='black' font-size='20'>M</text>
<text x ='1860' y='220' fill='black' font-size='12'>16A</text>
<use href='#differentiel' x='1850' y='210'/>
<html:div class='info'>
M: prises Buanderie + prise près du frigo
</html:div>
<line x1='1850' y1='250' x2='1850' y2='330'/>
<text x ='1840' y='334' fill='black' font-size='16' text-anchor='end'>M1</text>
<use href='#prise' x='1850' y='330'/>
<html:div class='info'>
bloc de prises sous étagère à gauche (à droite du frigo)
</html:div>
<use href='#prise' x='1870' y='330'/>
<html:div class='info'>
bloc de prises sous étagère à gauche (à droite du frigo)
</html:div>
<line x1='1850' y1='330' x2='1850' y2='410'/>
<text x ='1840' y='414' fill='black' font-size='16' text-anchor='end'>M2</text>
<use href='#prise' x='1850' y='410'/>
<html:div class='info'>
prise radiateur buanderie
</html:div>
<line x1='1850' y1='410' x2='1850' y2='490'/>
<text x ='1840' y='494' fill='black' font-size='16' text-anchor='end'>M3</text>
<line x1='1850' y1='490' x2='1870' y2='490'/>
<use href='#connexion' x='1870' y='490'/>
<line x1='1890' y1='490' x2='1910' y2='490'/>
<line x1='1910' y1='490' x2='1930' y2='490'/>
<use href='#volet' x='1930' y='490'/>
<html:div class='info'>
volet buanderie
</html:div>
<line x1='1850' y1='170' x2='2030' y2='170'/>
<line x1='2030' y1='170' x2='2030' y2='210'/>
<text x ='2040' y='190' fill='black' font-size='20'>N</text>
<text x ='2040' y='220' fill='black' font-size='12'>16A</text>
<use href='#differentiel' x='2030' y='210'/>
<html:div class='info'>
N: prises Salon entrée + Couloir étage
</html:div>
<line x1='2030' y1='250' x2='2030' y2='330'/>
<text x ='2020' y='334' fill='black' font-size='16' text-anchor='end'>N1</text>
<use href='#prise' x='2030' y='330'/>
<html:div class='info'>
salon : prise à droite de l'entrée
</html:div>
<line x1='2030' y1='330' x2='2030' y2='410'/>
<text x ='2020' y='414' fill='black' font-size='16' text-anchor='end'>N2</text>
<use href='#prise' x='2030' y='410'/>
<html:div class='info'>
bureau: prise radiateur
</html:div>
<line x1='2030' y1='410' x2='2070' y2='410'/>
<line x1='2070' y1='410' x2='2090' y2='410'/>
<use href='#radiateur' x='2090' y='410'/>
<html:div class='info'>
radiateur Siemens
</html:div>
<line x1='2030' y1='410' x2='2030' y2='490'/>
<text x ='2020' y='494' fill='black' font-size='16' text-anchor='end'>N3</text>
<use href='#prise' x='2030' y='490'/>
<html:div class='info'>
prise couloir étage à gauche et au fond
</html:div>
<line x1='2030' y1='490' x2='2030' y2='570'/>
<text x ='2020' y='574' fill='black' font-size='16' text-anchor='end'>N4</text>
<use href='#prise' x='2030' y='570'/>
<html:div class='info'>
prise couloir étage à droite et au fond
</html:div>
<line x1='2030' y1='170' x2='2210' y2='170'/>
<line x1='2210' y1='170' x2='2210' y2='210'/>
<text x ='2220' y='190' fill='black' font-size='20'>O</text>
<text x ='2220' y='220' fill='black' font-size='12'>16A</text>
<use href='#differentiel' x='2210' y='210'/>
<html:div class='info'>
O: Frigo + prises chambre Est (Musson)
</html:div>
<line x1='2210' y1='250' x2='2210' y2='330'/>
<text x ='2200' y='334' fill='black' font-size='16' text-anchor='end'>O1</text>
<use href='#prise' x='2210' y='330'/>
<html:div class='info'>
cuisine: prise frigo
</html:div>
<line x1='2210' y1='170' x2='2310' y2='170'/>
<line x1='2310' y1='170' x2='2310' y2='210'/>
<text x ='2320' y='190' fill='black' font-size='20'>P</text>
<text x ='2320' y='220' fill='black' font-size='12'>16A</text>
<use href='#differentiel' x='2310' y='210'/>
<html:div class='info'>
P: prises chambre Nord + fenêtre Cave
</html:div>
<line x1='2310' y1='250' x2='2310' y2='330'/>
<text x ='2300' y='334' fill='black' font-size='16' text-anchor='end'>P1</text>
<use href='#prise' x='2310' y='330'/>
<html:div class='info'>
bloc de prises près de la fenêtre de la cave
</html:div>
<use href='#prise' x='2330' y='330'/>
<html:div class='info'>
bloc de prises près de la fenêtre de la cave
</html:div>
<line x1='2310' y1='170' x2='2410' y2='170'/>
<line x1='2410' y1='170' x2='2410' y2='210'/>
<text x ='2420' y='190' fill='black' font-size='20'>Q</text>
<text x ='2420' y='220' fill='black' font-size='12'>16A</text>
<use href='#differentiel' x='2410' y='210'/>
<html:div class='info'>
Q: prises chambre Sud + entrée buanderie
</html:div>
<line x1='2410' y1='250' x2='2410' y2='330'/>
<text x ='2400' y='334' fill='black' font-size='16' text-anchor='end'>Q1</text>
<use href='#prise' x='2410' y='330'/>
<html:div class='info'>
prise à gauche du lit chambre Sud
</html:div>
<line x1='2410' y1='170' x2='2670' y2='170'/>
<line x1='2670' y1='170' x2='2670' y2='210'/>
<text x ='2680' y='190' fill='black' font-size='20'>R</text>
<text x ='2680' y='220' fill='black' font-size='12'>16A</text>
<use href='#differentiel' x='2670' y='210'/>
<html:div class='info'>
R: Salle-de-bain ETAGE + prise TV + prise PC bureau
</html:div>
<line x1='2670' y1='250' x2='2670' y2='330'/>
<text x ='2660' y='334' fill='black' font-size='16' text-anchor='end'>R1</text>
<use href='#prise' x='2670' y='330'/>
<html:div class='info'>
prise couloir à droite de la bibliothèque
</html:div>
<line x1='2670' y1='170' x2='2750' y2='170'/>
<line x1='2750' y1='170' x2='2750' y2='210'/>
<text x ='2760' y='190' fill='black' font-size='20'>S</text>
<text x ='2760' y='220' fill='black' font-size='12'>16A</text>
<use href='#differentiel' x='2750' y='210'/>
<html:div class='info'>
S: appoint du chauffage à accumulation Siemens au Salon
</html:div>
<line x1='2750' y1='250' x2='2750' y2='330'/>
<text x ='2740' y='334' fill='black' font-size='16' text-anchor='end'>S1</text>
<line x1='2750' y1='330' x2='2770' y2='330'/>
<use href='#connexion' x='2770' y='330'/>
<line x1='2750' y1='170' x2='2870' y2='170'/>
<line x1='2870' y1='170' x2='2870' y2='210'/>
<text x ='2880' y='190' fill='black' font-size='20'>T</text>
<use href='#differentiel' x='2870' y='210'/>
<html:div class='info'>
T: prises sous toiture arrière
</html:div>
<line x1='2870' y1='250' x2='2870' y2='330'/>
<text x ='2860' y='334' fill='black' font-size='16' text-anchor='end'>T1</text>
<use href='#prise' x='2870' y='330'/>
<html:div class='info'>
prise extérieure arrière droite sous toiture
</html:div>
<line x1='2870' y1='330' x2='2870' y2='410'/>
<text x ='2860' y='414' fill='black' font-size='16' text-anchor='end'>T2</text>
<use href='#prise' x='2870' y='410'/>
<html:div class='info'>
prise extérieure arrière gauche sous toiture
</html:div>
<div id='tooltip'>
Tooltip: ?
</div>
</svg>
</body>
</html>