將新的換行符添加到.textContent文本

我試圖在2行顯示工具提示文本，但沒有任何東西似乎工作。我有一個SVG文本元素用於顯示工具提示和管理工具提示的ecmascript。我已經在嘗試了線的幾個選項將新的換行符添加到.textContent文本

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

「\ n」，「\ n \ n」， '\\\ N'，風格= 「白色空間：前;」使用String.fromCharCode （13）

但工具提示不會分成2行。請提出任何建議。

<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>

來源

2016-04-07 P.Ellis

也許固定的寬度和工具提示的高度？ – Tinmar

SVG （下圖）是正確的方法。我通常會使用HTML工具提示，因爲它們不受SVG視圖框或縮放的影響。否則可能會導致有趣的工具提示大小。 –

嘗試增加<tspan>元件具有不同y位置工具提示內部，如從這裏實施例3中指出：http://www.w3schools.com/svg/svg_text.asp

更精確地，替換行tooltip.textContent = ...與

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);

來源

2016-04-07 12:48:19 MayaLekova

將新的換行符添加到.textContent文本

回答

相關問題