[英]Add new line character to .textContent text
我正在嘗試在2行上顯示工具提示文本,但似乎沒有任何效果。 我有一個帶有文本元素的SVG,用於顯示工具提示和管理該工具提示的ecmascript。 我已經嘗試了幾種選擇
tooltip.textContent = " Text = " + id + " <br/> Result =" + result;
“ \\ n”,“ \\ n \\ n”,“ \\\\\\ n”,style =“空白:pre;”,String.fromCharCode(13)
但工具提示不會分成兩行。 有任何建議請。
<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>
如此處示例3所示,嘗試在工具提示中添加具有不同y
位置的<tspan>
元素: 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);
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.