SVG：如何用 <svg:text> 标签替换 <html:div> 标签以显示工具提示（矩形宽度可变）？

【问题标题】：SVG: how to replace <html:div> tag by <svg:text> tag to display a tooltip (rectangle width is variable)?SVG：如何用 <svg:text> 标签替换 <html:div> 标签以显示工具提示（矩形宽度可变）？
【发布时间】：2020-07-30 15:46:11
【问题描述】：

我创建了一个包含 SVG 图像的 HTML 页面。 在此页面中，我创建了一个自定义工具提示，它是 &lt;html:div&gt;。

我目前了解到当前的浏览器现在能够读取 SVG 文件。 所以我决定将我的 HTML 文件迁移到 SVG 文件。

一切正常。样式和 Javascript 继续适用于 SVG 文件。

还有一个问题。

我已将&lt;html:div&gt; 替换为一个&lt;rect&gt;，然后是一个&lt;text&gt; 像这样的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，因此当鼠标在图像上移动时，在 &lt;desc&gt; SVG 标记中的 &lt;use&gt; 标记下方找到的工具提示文本被复制到 &lt;text id='tooltip'&gt;。

<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 &lt;div&gt; 解决方案中一样？

【问题讨论】：

    标签： html d3.js svg tooltip


    【解决方案1】：

    我找到了解决问题的方法。

    我使用 D3 getComputedTextLength() 函数计算包含工具提示文本的 &lt;text&gt; 元素的长度。 感谢https://stackoverflow.com/a/14569745/948359

    然后我用这个长度来修复包含&lt;text&gt;工具提示的&lt;rect&gt;的宽度。

    使用此技术，我现在在将鼠标拖到某些设备上时有工具提示。

    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>

    【讨论】：

      猜你喜欢
      • 1970-01-01
      • 2019-11-25
      • 1970-01-01
      • 2020-06-10
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2015-03-22
      • 2020-05-20
      相关资源
      最近更新 更多
      热门标签
      Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode