SVG: как заменить тег <html: div> на тег для отображения всплывающей подсказки (ширина прямоугольника является переменной)?

Question

Я создал страницу HTML, содержащую изображение SVG. На этой странице я создал пользовательскую всплывающую подсказку <html:div>.

. В настоящее время я прочитал, что современные браузеры теперь могут читать SVG-файл. Поэтому я решил перенести файл HTML в файл SVG.

Все работает правильно. Стили и Javascript продолжают работать с SVG-файлом.

Одна проблема заключается в повторении.

Я заменил <html:div> на один <rect>, за которым следует один <text> SVG-элемент, подобный этому

<rect id='tooltip-rect' x='20' y='20' width='200' height='25' fill='yellow'/>
<text id='tooltip-text' x='20' y='20' dominant-baseline='middle' text-anchor='start'>
    Tooltip: ?
</text>

Я написал несколько javascript, поэтому при наведении курсора мыши на изображение текст подсказки находится чуть ниже тега <use> в теге <desc> SVG и копируется в <text id='tooltip'>.

<use href='#interrupteur' x='3540' y='410'/>
<desc class='info'>
interrupteur sur le mur de séparation cuisine/sàm
</desc>

Javascript код, используемый для отображения всплывающей подсказки

document.addEventListener("DOMContentLoaded", function(event) { 

var tooltip = d3.select("#tooltip-text");
var toolrec = d3.select("#tooltip-rect");

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-text').innerHTML = sTooltip;
        tooltip.style("opacity", "1");
        toolrec.style("opacity", "1");
        })
    .on("mousemove", function ()
        {
        toolrec.attr("x", d3.select(this).attr("x") - 4);
        toolrec.attr("y", d3.select(this).attr("y") - 12);
        tooltip.attr("x", d3.select(this).attr("x"));
        tooltip.attr("y", d3.select(this).attr("y"));
        })
    .on("mouseout", function ()
        {
        tooltip.style("opacity", "0");
        toolrec.style("opacity", "0");
        return true;
        });

});

Это работает ... но

В HTML ширина прямоугольника, ограничивающего текстовую подсказку, равна увеличивается при увеличении текста и уменьшается при уменьшении текста.

В решении SVG размер или прямоугольник остаются неизменными.

На предыдущем изображении текст слишком длинный и перекрывает прямоугольник!

Что можно сделать, чтобы ширина зависит от длины всплывающей подсказки, как в HTML <div> решении?

Answer 1

Я нашел решение своей проблемы.

Я вычисляю длину элемента <text>, содержащего текст подсказки, используя функцию D3 getComputedTextLength(). Благодаря { ссылка }

Затем я использую эту длину, чтобы зафиксировать ширину <rect>, содержащую <text> подсказку.

Используя эту технику c, Теперь у меня есть всплывающая подсказка при перетаскивании мыши на какое-то устройство.

document.addEventListener("DOMContentLoaded", function(event) { 

var tooltip = d3.select("#tooltip-text");
var toolrec = d3.select("#tooltip-rect");
var iTextLength = 0;

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

        tooltip.node().innerHTML = sTooltip;
		iTextLength = tooltip.node().getComputedTextLength();
		tooltip.style("opacity", "1");
		toolrec.style("opacity", "1");
		})
    .on("mousemove", function ()
		{
        toolrec.attr("x", d3.select(this).attr("x") - 5);
        toolrec.attr("y", d3.select(this).attr("y") - 12);
        toolrec.attr("width", iTextLength + 10);
        tooltip.attr("x", d3.select(this).attr("x"));
        tooltip.attr("y", d3.select(this).attr("y"));
		})
    .on("mouseout", function ()
		{
        tooltip.style("opacity", "0");
        toolrec.style("opacity", "0");
		return true;
		});

});

:root {
    --line-color: black;
    --line-width: 2;
    }

line, polyline, rect, circle, path {
    stroke-width: var(--line-width);
    stroke: var(--line-color);
    }

#tooltip-text {
    max-width: 800px;
    text-align:left;
    transition: opacity 0.4s;
    pointer-events:none;
    opacity: 0;
    padding: 4px;
    font-family: Arial;
    font-size: 14;
	}
	
#tooltip-rect {
    background: yellow;
    border:solid gray;
    max-width: 800px;
    transition: opacity 0.4s;
    pointer-events:none;
    opacity: 0;
	}

svg {
    margin:10px 20px;
    overflow:visible; 
	}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.5.0/d3.min.js"></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" style="opacity: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="disjoncteur" transform="rotate(-20,0,0)">
      <polyline points="0 0 0 40 5 40 5 35 0 35" fill="none" />
    </g>
    <g id="prise">
      <path d="m40,-20 a20,20 0 0,0 0,40 z" fill="white" style="stroke:white" />
      <line x1="0" y1="0" x2="20" y2="0" />
      <line x1="20" y1="-15" x2="20" y2="15" />
      <path d="m40,-20 a20,20 0 0,0 0,40" fill="none" />
      <line x1="40" y1="-20" x2="40" y2="-28" />
      <line x1="40" y1="20" x2="40" y2="28" />
    </g>
    <g id="connexion">
      <rect x="0" y="-10" width="20" height="20" fill="white" />
    </g>
    <g id="lampe">
      <circle cx="0" cy="0" r="15" stroke="none" style="opacity:0" />
      <line x1="-10" y1="-10" x2="10" y2="10" />
      <line x1="10" y1="-10" x2="-10" y2="10" />
    </g>
    <g id="interrupteur">
      <circle cx="10" cy="0" r="10" fill="white" />
      <g transform="rotate(-60 10 0)">
        <line x1="20" y1="0" x2="50" y2="0" />
      </g>
    </g>
    <g id="int-sans-fil">
      <rect x="0" y="-5" width="10" height="10" fill="white" />
    </g>
    <g id="int-wifi">
      <rect x="0" y="-5" width="10" height="10" fill="white" />
    </g>
    <g id="int-radio">
      <rect x="0" y="-5" width="10" height="10" fill="white" />
    </g>
    <g id="int-unipolaire">
      <circle cx="10" cy="0" r="10" fill="white" />
      <g transform="rotate(-60 10 0)">
        <line x1="20" y1="0" x2="50" y2="0" />
        <line x1="50" y1="0" x2="50" y2="5" />
      </g>
    </g>
    <g id="int-bipolaire">
      <circle cx="10" cy="0" r="10" fill="white" />
      <g transform="rotate(-60 10 0)">
        <line x1="20" y1="0" x2="50" y2="0" />
        <line x1="50" y1="0" x2="50" y2="5" />
        <line x1="45" y1="0" x2="45" y2="5" />
      </g>
    </g>
    <g id="int-va-et-vient">
      <circle cx="10" cy="0" r="10" fill="white" />
      <g transform="rotate(-60 10 0)">
        <line x1="20" y1="0" x2="50" y2="0" />
        <line x1="50" y1="0" x2="50" y2="5" />
        <line x1="0" y1="0" x2="-30" y2="0" />
        <line x1="-30" y1="0" x2="-30" y2="-5" />
      </g>
    </g>
    <g id="inverseur">
      <g transform="translate(w²²0 0)">
        <circle cx="10" cy="0" r="10" fill="white" />
        <g transform="rotate(-60 10 0)">
          <line x1="20" y1="0" x2="50" y2="0" />
          <line x1="50" y1="0" x2="50" y2="5" />
          <line x1="0" y1="0" x2="-30" y2="0" />
          <line x1="-30" y1="0" x2="-30" y2="-5" />
        </g>
        <g transform="rotate(60 10 0)">
          <line x1="20" y1="0" x2="50" y2="0" />
          <line x1="50" y1="0" x2="50" y2="-5" />
          <line x1="0" y1="0" x2="-30" y2="0" />
          <line x1="-30" y1="0" x2="-30" y2="5" />
        </g>
      </g>
    </g>
    <g id="machine-à-laver">
      <rect x="0" y="-20" width="40" height="40" fill="white" fill-opacity="0.0" />
      <circle cx="20" cy="0" r="12" stroke="blue" fill="none" />
      <circle cx="20" cy="0" r="5" stroke="blue" fill="red" />
    </g>
    <g id="séchoir">
      <rect x="0" y="-20" width="40" height="40" fill="white" fill-opacity="0.0" />
      <circle cx="15" cy="-8" r="5" fill="none" />
      <circle cx="25" cy="-8" r="5" fill="none" />
      <circle cx="20" cy="8" r="5" fill="black" />
    </g>
    <g id="chauffe-eau">
      <circle cx="20" cy="0" r="20" fill="white" fill-opacity="0.0" />
      <circle cx="20" cy="0" r="15" fill="cyan" />
      <path d="m5,0 l 5,-5 l 10,10 l 10,-10 l 5,5" fill="none" />
    </g>
    <g id="chauffe-eau-direct">
      <circle cx="20" cy="0" r="20" fill="cyan" />
      <path d="m0,0 l 5,-5 l 10,10 l 10,-10 l 10,10 l 5,-5" fill="none" />
    </g>
    <g id="télérupteur">
      <rect x="0" y="-10" width="40" height="20" fill="white" />
      <path d="m5,5 h10 v-10 m20,10 h-10 v-10" fill="none" />
    </g>
    <g id="télérupteur-radio">
      <rect x="0" y="-10" width="40" height="20" fill="none" />
      <path d="m5,5 h10 v-10 m20,10 h-10 v-10" fill="none" />
      <path d="M25,15 A5,5 0 0,1 15,15" fill="none" stroke-width="1" />
      <path d="M30,15 A10,10 0 0,1 10,15" fill="none" stroke-width="1" />
      <path d="M35,15 A15,15 0 0,1 5,15" fill="none" stroke-width="1" />
    </g>
    <g id="télérupteur-wifi">
      <rect x="0" y="-10" width="40" height="20" fill="none" />
      <path d="m5,5 h10 v-10 m20,10 h-10 v-10" fill="none" />
    </g>
    <g id="bouton-poussoir">
      <circle cx="10" cy="0" r="10" fill="none" />
      <circle cx="10" cy="0" r="5" fill="red" />
    </g>
    <g id="transformateur">
      <circle cx="10" cy="0" r="10" fill="none" />
      <circle cx="20" cy="0" r="10" fill="none" />
    </g>
    <g id="lave-vaisselle">
      <rect x="0" y="-20" width="40" height="40" fill="white" />
      <line x1="0" y1="-20" x2="40" y2="20" />
      <line x1="0" y1="20" x2="40" y2="-20" />
      <circle cx="20" cy="0" r="10" fill="white" />
    </g>
    <g id="plaque-cuisson">
      <rect x="0" y="-20" width="40" height="40" fill="white" />
      <circle cx="30" cy="-10" r="5" stroke="blue" fill="none" />
      <circle cx="30" cy="10" r="5" stroke="blue" fill="none" />
      <circle cx="10" cy="10" r="5" stroke="blue" fill="none" />
    </g>
    <g id="télévision">
      <rect x="0" y="-20" width="60" height="40" fill="white" />
      <rect x="5" y="-15" width="50" height="30" fill="none" />
      <line x1="30" y1="20" x2="30" y2="25" />
      <line x1="20" y1="25" x2="40" y2="25" />
    </g>
    <g id="ordinateur">
      <rect x="0" y="-20" width="40" height="30" fill="white" />
      <rect x="5" y="-15" width="30" height="20" fill="none" />
      <rect x="0" y="15" width="40" height="10" fill="none" />
      <line x1="20" y1="20" x2="35" y2="20" />
    </g>
    <g id="four-classique">
      <rect x="0" y="-20" width="40" height="40" fill="white" />
      <line x1="0" y1="-10" x2="40" y2="-10" />
      <circle cx="20" cy="5" r="5" fill="none" />
    </g>
    <g id="four-pyrolyse">
      <rect x="0" y="-20" width="40" height="40" fill="white" />
    </g>
    <g id="micro-onde">
      <rect x="0" y="-20" width="40" height="40" fill="white" fill-opacity="0.0" />
      <g transform="scale(0.2 0.2)">
        <path d="M20 -30 C 40 -80 , 80 -80 , 100 -30 S 160 30, 180 -30" stroke="black" fill="none" />
        <path d="M20   0 C 40 -50 , 80 -50 , 100   0 S 160 50, 180   0" stroke="black" fill="none" />
        <path d="M20  30 C 40 -20 , 80 -20 , 100  30 S 160 80, 180  30" stroke="black" fill="none" />
      </g>
    </g>
    <g id="frigo">
      <rect x="0" y="-20" width="40" height="40" fill="white" />
      <text x="20" y="6" dominant-baseline="middle" text-anchor="middle" font-size="24">*</text>
    </g>
    <g id="congélateur">
      <rect x="0" y="-20" width="40" height="40" fill="white" />
      <text x="20" y="4" dominant-baseline="middle" text-anchor="middle">***</text>
    </g>
    <g id="radiateur">
      <rect x="0" y="-15" width="60" height="30" 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" 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>
    <g id="spot">
      <path d="m10,-10 a10,10 0 0,0 0,20" fill="none" />
      <circle cx="10" cy="0" r="5" fill="yellow" />
      <g transform="rotate(-45,10,0)">
        <line x1="5" y1="0" x2="15" y2="0" stroke-width="1" />
        <line x1="10" y1="-5" x2="10" y2="5" stroke-width="1" />
      </g>
    </g>
    <g id="neon-simple">
      <line x1="0" y1="-5" x2="0" y2="5" stroke="black" />
      <line x1="40" y1="-5" x2="40" y2="5" stroke="black" />
      <rect x="0" y="-2" width="40" height="4" fill="yellow" stroke="black" stroke-width="1" />
    </g>
    <g id="neon-double">
      <line x1="0" y1="-7" x2="0" y2="7" stroke="black" />
      <line x1="40" y1="-7" x2="40" y2="7" stroke="black" />
      <rect x="0" y="-6" width="40" height="4" fill="yellow" stroke="black" stroke-width="1" />
      <rect x="0" y="2" width="40" height="4" fill="yellow" stroke="black" stroke-width="1" />
    </g>
    <g id="compteur">
      <rect x="0" y="-20" width="40" height="40" fill="none" />
      <line x1="0" y1="-10" x2="40" y2="-10" />
      <text x="20" y="5" dominant-baseline="middle" text-anchor="middle" font-family="Arial" font-size="16">kWh</text>
    </g>
  </defs>

<line x1='100' y1='50' x2='100' y2='90'/>
<text x ='110' y='70' fill='black' font-family='Arial' font-size='20'>Différenciel PRINCIPAL</text>
<text x ='110' y='100' fill='black' font-family='Arial' font-size='12'>&#x0394;300 mA</text>
<use href='#differentiel' x='100' y='90'/>
<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-family='Arial' font-size='20'>B</text>
<text x ='110' y='220' fill='black' font-family='Arial' font-size='12'>10A</text>
<use href='#differentiel' x='100' y='210'/>
<desc class='info'>
B: éclairage Etage + Cave  + Hall + WC + cagibi +
</desc>
<line x1='100' y1='250' x2='100' y2='330'/>
<text x='90' y='334' fill='black' font-family='Arial' font-size='16' text-anchor='end'>B1</text>
<line x1='100' y1='330' x2='120' y2='330'/>
<use href='#int-va-et-vient' x='120' y='330'/>
<desc class='info'>
hall: interrupteur à droite des escaliers
</desc>
<use href='#int-va-et-vient' x='140' y='330'/>
<desc class='info'>
hall: interrupteur à gauche de la porte de la cuisine
</desc>
<line x1='160' y1='330' x2='200' y2='330'/>
<use href='#lampe' x='200' y='330'/>
<desc class='info'>
lampe Hall dans l'entrée
</desc>
<line x1='100' y1='330' x2='100' y2='410'/>
<text x='90' y='414' fill='black' font-family='Arial' font-size='16' text-anchor='end'>B7</text>
<line x1='100' y1='410' x2='120' y2='410'/>
<use href='#int-unipolaire' x='120' y='410'/>
<desc class='info'>
chambre Est: interrupteur à gauche de la porte
</desc>
<line x1='140' y1='410' x2='180' y2='410'/>
<use href='#lampe' x='180' y='410'/>
<desc class='info'>
lampe chambre Est (Musson)
</desc>
<line x1='100' y1='410' x2='100' y2='490'/>
<text x='90' y='494' fill='black' font-family='Arial' font-size='16' text-anchor='end'>B8</text>
<line x1='100' y1='490' x2='120' y2='490'/>
<use href='#int-va-et-vient' x='120' y='490'/>
<desc class='info'>
interrupteur à gauche de l'escalier
</desc>
<line x1='140' y1='490' x2='170' y2='490'/>
<use href='#inverseur' x='170' y='490'/>
<desc class='info'>
interrupteur à droite du passage entre caves
</desc>
<line x1='190' y1='490' x2='220' y2='490'/>
<use href='#int-va-et-vient' x='220' y='490'/>
<desc class='info'>
interrupteur à droite de la porte de garage
</desc>
<line x1='240' y1='490' x2='280' y2='490'/>
<use href='#lampe' x='280' y='490'/>
<desc class='info'>
lampes cave petit garage
</desc>
<line x1='100' y1='490' x2='100' y2='570'/>
<text x ='90' y='574' fill='black' font-family='Arial' font-size='16' text-anchor='end'>B12</text>
<line x1='100' y1='570' x2='120' y2='570'/>
<use href='#télérupteur-radio' x='120' y='570'/>
<use href='#int-radio' x='140' y='610'/>
<use href='#int-radio' x='160' y='610'/>
<use href='#int-radio' x='180' y='610'/>
<line x1='160' y1='570' x2='200' y2='570'/>
<use href='#lampe' x='200' y='570'/>
<desc class='info'>
lampe couloir étage Ouest (Signeulx)
</desc>
<line x1='100' y1='170' x2='350' y2='170'/>
<line x1='350' y1='170' x2='350' y2='210'/>
<text x ='360' y='190' fill='black' font-family='Arial' font-size='20'>C</text>
<text x ='360' y='220' fill='black' font-family='Arial' font-size='12'>25A</text>
<use href='#differentiel' x='350' y='210'/>
<desc class='info'>
C: triphasé cuisine
</desc>
<line x1='350' y1='250' x2='350' y2='330'/>
<text x ='340' y='334' fill='black' font-family='Arial' font-size='16' text-anchor='end'>C1</text>
<line x1='350' y1='330' x2='370' y2='330'/>
<use href='#connexion' x='370' y='330'/>
<desc class='info'>
connection directe
</desc>
<line x1='390' y1='330' x2='410' y2='330'/>
<line x1='410' y1='330' x2='430' y2='330'/>
<use href='#four-classique' x='430' y='330'/>
<desc class='info'>
four Siemens
</desc>
<line x1='350' y1='330' x2='350' y2='410'/>
<text x ='340' y='414' fill='black' font-family='Arial' font-size='16' text-anchor='end'>C2</text>
<line x1='350' y1='410' x2='370' y2='410'/>
<use href='#connexion' x='370' y='410'/>
<desc class='info'>
connection directe
</desc>
<line x1='390' y1='410' x2='410' y2='410'/>
<line x1='410' y1='410' x2='430' y2='410'/>
<use href='#micro-onde' x='430' y='410'/>
<desc class='info'>
micro-onde Siemens
</desc>
<line x1='350' y1='170' x2='530' y2='170'/>
<line x1='530' y1='170' x2='530' y2='210'/>
<text x ='540' y='190' fill='black' font-family='Arial' font-size='20'>Différentiel SECONDAIRE</text>
<text x ='540' y='220' fill='black' font-family='Arial' font-size='12'>&#x0394;30 mA</text>
<use href='#differentiel' x='530' y='210'/>
<line x1='530' y1='250' x2='530' y2='290'/>
<line x1='530' y1='290' x2='530' y2='330'/>
<text x ='540' y='310' fill='black' font-family='Arial' font-size='20'>E</text>
<text x ='540' y='340' fill='black' font-family='Arial' font-size='12'>16A</text>
<use href='#differentiel' x='530' y='330'/>
<desc class='info'>
E: éclairage et 2 prises dans salle de bain principale
</desc>
<line x1='530' y1='370' x2='530' y2='450'/>
<text x='520' y='454' fill='black' font-family='Arial' font-size='16' text-anchor='end'>E1</text>
<line x1='530' y1='450' x2='550' y2='450'/>
<use href='#int-unipolaire' x='550' y='450'/>
<desc class='info'>
interrupteur à gauche de la colonne de descente d'eau
</desc>
<line x1='570' y1='450' x2='610' y2='450'/>
<use href='#lampe' x='610' y='450'/>
<desc class='info'>
lampe salle de bain
</desc>
<line x1='530' y1='450' x2='530' y2='530'/>
<text x ='520' y='534' fill='black' font-family='Arial' font-size='16' text-anchor='end'>E2</text>
<use href='#prise' x='530' y='530'/>
<desc class='info'>
bloc prises à gauche de la colonne de descente d'eau
</desc>
<use href='#prise' x='550' y='530'/>
<desc class='info'>
bloc prises à gauche de la colonne de descente d'eau
</desc>
<line x1='530' y1='290' x2='680' y2='290'/>
<line x1='680' y1='290' x2='680' y2='330'/>
<text x ='690' y='310' fill='black' font-family='Arial' font-size='20'>F</text>
<text x ='690' y='340' fill='black' font-family='Arial' font-size='12'>16A</text>
<use href='#differentiel' x='680' y='330'/>
<desc class='info'>
F: Salle-de-bain ETAGE + prise TV + prise PC bureau
</desc>
<line x1='680' y1='370' x2='680' y2='450'/>
<text x ='670' y='454' fill='black' font-family='Arial' font-size='16' text-anchor='end'>F1</text>
<use href='#prise' x='680' y='450'/>
<desc class='info'>
prise TV au Salon
</desc>
<line x1='680' y1='450' x2='720' y2='450'/>
<line x1='720' y1='450' x2='740' y2='450'/>
<use href='#télévision' x='740' y='450'/>
<desc class='info'>
TV Philips
</desc>
<line x1='680' y1='450' x2='680' y2='530'/>
<text x ='670' y='534' fill='black' font-family='Arial' font-size='16' text-anchor='end'>F2</text>
<use href='#prise' x='680' y='530'/>
<desc class='info'>
prise PC au Bureau
</desc>
<line x1='680' y1='530' x2='720' y2='530'/>
<line x1='720' y1='530' x2='740' y2='530'/>
<use href='#ordinateur' x='740' y='530'/>
<desc class='info'>
ordinateur Dell
</desc>
<line x1='680' y1='530' x2='680' y2='610'/>
<text x ='670' y='614' fill='black' font-family='Arial' font-size='16' text-anchor='end'>F3</text>
<line x1='680' y1='610' x2='700' y2='610'/>
<use href='#télérupteur-radio' x='700' y='610'/>
<use href='#int-radio' x='720' y='650'/>
<line x1='740' y1='610' x2='780' y2='610'/>
<use href='#lampe' x='780' y='610'/>
<desc class='info'>
Salle-de-bain: lampe plafond
</desc>
<line x1='680' y1='610' x2='680' y2='690'/>
<text x ='670' y='694' fill='black' font-family='Arial' font-size='16' text-anchor='end'>F4</text>
<use href='#prise' x='680' y='690'/>
<desc class='info'>
Salle-de-bain: lampe meuble
</desc>
<line x1='680' y1='690' x2='680' y2='770'/>
<text x ='670' y='774' fill='black' font-family='Arial' font-size='16' text-anchor='end'>F5</text>
<use href='#prise' x='680' y='770'/>
<desc class='info'>
Salle-de-bain: prise radiateur
</desc>
<line x1='680' y1='770' x2='720' y2='770'/>
<line x1='720' y1='770' x2='740' y2='770'/>
<use href='#radiateur' x='740' y='770'/>
<desc class='info'>
radiateur Jaga
</desc>
<line x1='680' y1='770' x2='680' y2='850'/>
<text x ='670' y='854' fill='black' font-family='Arial' font-size='16' text-anchor='end'>F6</text>
<use href='#prise' x='680' y='850'/>
<desc class='info'>
Salle-de-bain: bloc de prises sous le meuble
</desc>
<use href='#prise' x='700' y='850'/>
<desc class='info'>
Salle-de-bain: bloc de prises sous le meuble
</desc>
<line x1='680' y1='290' x2='860' y2='290'/>
<line x1='860' y1='290' x2='860' y2='330'/>
<text x ='870' y='310' fill='black' font-family='Arial' font-size='20'>G</text>
<text x ='870' y='340' fill='black' font-family='Arial' font-size='12'>16A</text>
<use href='#differentiel' x='860' y='330'/>
<desc class='info'>
G: Salle-de-bain PRINCIPALE + Bloc machines à laver
</desc>
<line x1='860' y1='370' x2='860' y2='450'/>
<text x ='850' y='454' fill='black' font-family='Arial' font-size='16' text-anchor='end'>G1</text>
<use href='#prise' x='860' y='450'/>
<desc class='info'>
bloc de prises à l'évier
</desc>
<use href='#prise' x='880' y='450'/>
<desc class='info'>
bloc de prises à l'évier
</desc>
<line x1='860' y1='450' x2='860' y2='530'/>
<text x ='850' y='534' fill='black' font-family='Arial' font-size='16' text-anchor='end'>G2</text>
<use href='#prise' x='860' y='530'/>
<desc class='info'>
lampe meuble
</desc>
<line x1='860' y1='530' x2='860' y2='610'/>
<text x ='850' y='614' fill='black' font-family='Arial' font-size='16' text-anchor='end'>G3</text>
<use href='#prise' x='860' y='610'/>
<desc class='info'>
bloc de prises au petit garage à gauche de l'évier
</desc>
<use href='#prise' x='880' y='610'/>
<desc class='info'>
bloc de prises au petit garage à gauche de l'évier
</desc>
<use href='#prise' x='900' y='610'/>
<desc class='info'>
bloc de prises au petit garage à gauche de l'évier
</desc>
<use href='#prise' x='920' y='610'/>
<desc class='info'>
bloc de prises au petit garage à gauche de l'évier
</desc>
<line x1='920' y1='610' x2='960' y2='610'/>
<line x1='960' y1='610' x2='980' y2='610'/>
<use href='#machine-à-laver' x='980' y='610'/>
<desc class='info'>
machine à laver
</desc>
<line x1='530' y1='170' x2='1080' y2='170'/>
<line x1='1080' y1='170' x2='1080' y2='210'/>
<text x ='1090' y='190' fill='black' font-family='Arial' font-size='20'>I</text>
<text x ='1090' y='220' fill='black' font-family='Arial' font-size='12'>16A</text>
<use href='#differentiel' x='1080' y='210'/>
<desc class='info'>
I: chambre étage Ouest (Signeulx)
</desc>
<line x1='1080' y1='250' x2='1080' y2='330'/>
<text x ='1070' y='334' fill='black' font-family='Arial' font-size='16' text-anchor='end'>I1</text>
<use href='#prise' x='1080' y='330'/>
<desc class='info'>
prise à gauche de la porte
</desc>
<line x1='1080' y1='330' x2='1080' y2='410'/>
<text x ='1070' y='414' fill='black' font-family='Arial' font-size='16' text-anchor='end'>I2</text>
<use href='#prise' x='1080' y='410'/>
<desc class='info'>
prise radiateur en dessous de la fenêtre
</desc>
<line x1='1080' y1='410' x2='1120' y2='410'/>
<line x1='1120' y1='410' x2='1140' y2='410'/>
<use href='#radiateur' x='1140' y='410'/>
<desc class='info'>
radiateur Siemens
</desc>
<line x1='1080' y1='410' x2='1080' y2='490'/>
<text x ='1070' y='494' fill='black' font-family='Arial' font-size='16' text-anchor='end'>I3</text>
<line x1='1080' y1='490' x2='1100' y2='490'/>
<use href='#connexion' x='1100' y='490'/>
<desc class='info'>
volet chambre étage Ouest
</desc>
<line x1='1120' y1='490' x2='1140' y2='490'/>
<line x1='1140' y1='490' x2='1160' y2='490'/>
<use href='#volet' x='1160' y='490'/>
<desc class='info'>
volet
</desc>
<line x1='1080' y1='490' x2='1080' y2='570'/>
<text x ='1070' y='574' fill='black' font-family='Arial' font-size='16' text-anchor='end'>I4</text>
<use href='#prise' x='1080' y='570'/>
<desc class='info'>
bloc de prises à gauche de la paque de cuisson en vitrocéramique
</desc>
<use href='#prise' x='1100' y='570'/>
<desc class='info'>
bloc de prises à gauche de la paque de cuisson en vitrocéramique
</desc>
<use href='#prise' x='1120' y='570'/>
<desc class='info'>
bloc de prises à gauche de la paque de cuisson en vitrocéramique
</desc>
<line x1='1080' y1='170' x2='1260' y2='170'/>
<line x1='1260' y1='170' x2='1260' y2='210'/>
<text x ='1270' y='190' fill='black' font-family='Arial' font-size='20'>J</text>
<text x ='1270' y='220' fill='black' font-family='Arial' font-size='12'>16A</text>
<use href='#differentiel' x='1260' y='210'/>
<desc class='info'>
J: Prises bloc de cuisson
</desc>
<line x1='1260' y1='250' x2='1260' y2='330'/>
<text x ='1250' y='334' fill='black' font-family='Arial' font-size='16' text-anchor='end'>J1</text>
<use href='#prise' x='1260' y='330'/>
<desc class='info'>
bloc de prises à droite de la plaque de cuisson en vitrocéramique
</desc>
<use href='#prise' x='1280' y='330'/>
<desc class='info'>
bloc de prises à droite de la plaque de cuisson en vitrocéramique
</desc>
<use href='#prise' x='1300' y='330'/>
<desc class='info'>
bloc de prises à droite de la plaque de cuisson en vitrocéramique
</desc>
<rect id='tooltip-rect' x='20' y='20' width='100' height='25' fill="yellow"/>
<text id='tooltip-text' x='20' y='20' dominant-baseline="middle" text-anchor="start">
Tooltip: ?
</text>
</svg>