0
2行にわたるツールヒントテキストを表示しようとしていますが、何も動作していないようです。 私は、ツールチップを管理するecmascriptを持つツールチップを表示するためのテキスト要素を持つSVGを持っています。 私は「\ n」は.textContentテキストに改行文字を追加します。
tooltip.textContent = " Text = " + id + " <br/> Result =" + result;
ラインでいくつかのオプションを試してみました、「\ 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>
とライン
tooltip.textContent = ...
を交換し、ツールチップの高さですか? – TinmarSVG(下記)が正しいアプローチです。私は通常、SVGビューボックスやズームの影響を受けないので、HTMLのツールチップを使用します。それ以外の場合は、面白いツールチップのサイズになります。 –