Yeni satır karakteri için .textContent metni ekleyin

Question

2 satırlık bir araç ipucu metni görüntülemeye çalışıyorum, ancak hiçbir şey çalışmıyor gibi görünüyor. Araç ipucunu yöneten bir el yazısıyla bir araç ipucu görüntülemek için bir metin elemanlı bir SVG var. Ben doğrultusunda

tooltip.textContent = " Text = " + id + " <br/> Result =" + result; 

“\ n”, “\ n \ n”, '\\\ n', style = "white-space: pre;" çeşitli seçenekler denedim, String.fromCharCode (13)

ancak araç ipucu 2 satıra bölünmeyecektir. Herhangi bir öneri lütfen.

<svg ….> 
    <script type="text/ecmascript"> 
<![CDATA[ 
    function init(evt) { 
    if (window.svgDocument == null) { 
     svgDoc = evt.target.ownerDocument; 
    } 
    theSvgElement = document.getElementById("svg"); 
    tooltip = svgDoc.getElementById('tooltip');    
     }   
    function ShowTooltip(id) { 
    result = getResult(); 
    tooltip.setAttributeNS(null,"visibility","visible"); 
    tooltip.textContent = " Text = " + id + " \n Result =" + result; 
     } 
    function HideTooltip() { 
    tooltip.setAttributeNS(null,"visibility","hidden"); 
     } 
]]> 
    </script> 
     <g> 
    <circle 
    r="40" 
    cy="200" 
    cx="300" 
     fill="#00b300" 
     onmouseout="HideTooltip()" 
     onmouseover="ShowTooltip('CD.02.02.02')"/> 
     </g> 
     <text class="tooltip" id="tooltip" x="20" y="20" 
      style="font-family: Times New Roman; font-size: 80; fill: #000000; white-space: pre;" 
      visibility="hidden"> Hover to read the text. 
    </text> 
    </svg> 

Answer 1

deneyin buradan Örnek 3'te belirtildiği gibi, farklı y pozisyonlu ipucu içinde <tspan> elemanları ekleme: http://www.w3schools.com/svg/svg_text.asp Daha kesin olarak

,

tooltip.textContent = ""; 

var tspan1 = document.createElementNS("http://www.w3.org/2000/svg", 'tspan'); 
txtnode1 = document.createTextNode("Text = " + id); 
tspan1.appendChild(txtnode1); 
tspan1.setAttribute("x",20); 
tspan1.setAttribute("y",30); 

var tspan2 = document.createElementNS("http://www.w3.org/2000/svg", 'tspan'); 
txtnode2 = document.createTextNode("Result =" + result); 
tspan2.appendChild(txtnode2); 
tspan2.setAttribute("x",20); 
tspan2.setAttribute("y",60); 

tooltip.appendChild(tspan1); 
tooltip.appendChild(tspan2);