这个SVG代码在Firefox中运行,但我在Chrome中遇到了问题,当然还有IE中的问题。
在Chrome中:忽略中断线。 在IE中:没有显示。
我认为问题出在格式字符'\ r \ n'的行中,但我找不到错误。
这些行从tooltip.innerHTML开始+ ='\ r \ n第二行。'
我做错了什么?或更确切地说:我对IE&铬?
提前Thamks。<?xml version='1.0' encoding='UTF-8'?>
<svg version='1.1' id='project' xmlns:svg='http://www.w3.org/2000/svg'
xmlns='http://www.w3.org/2000/svg'
xmlns:xlink='http://www.w3.org/1999/xlink'
onload='init(evt)'>
<script type='text/ecmascript'>
<style>
.boton
{
cursor:pointer;
}
.cursorHand
{
}
.tooltip
{
white-space: pre; /*Resuelve el problema del ToolTip Break Line*/
position: absolute;
top: 0;
left: 0;
z-index: 2;
font: normal 10pt sans-serif;
padding: 3px;
border: solid 1px;
}
.tooltip_bg
{
fill: #F2F5A9;
stroke: black;
stroke-width: 1;
opacity: 1;
}
</style>
/****************************
Sólo se invoca en el inicio.
/****************************/
function init(evt) {
gSvgDoc = evt.target.ownerDocument;
//El botón toggleButtonLCOND;
toggleButtonLCOND = document.getElementById('toggleInsertaElementoLCOND');
toggleButtonLCOND.addEventListener('mouseover', manejadorDeMouseHoverEnBotones);
//Seteo ToolTips
tooltip = gRootDocumento.getElementById('tooltip');
tooltip_bg = gRootDocumento.getElementById('tooltip_bg');
}
<![CDATA[
var toggleButtonLCOND;
var gRootDocumento = document.documentElement;
var tooltip = gRootDocumento.getElementById('tooltip');
var tooltip_bg = gRootDocumento.getElementById('tooltip_bg');
var timeEntradaEnBoton;
/*************************************
Manejador de evento Hover en botones.
**************************************/
function manejadorDeMouseHoverEnBotones(evt) {
//Arranco contador de ToolTip. Se para a los 3s y arranca ToolTip
var cuentaAtras = 1;
actualizaToolTip(evt,this);
tooltip.setAttribute('visibility','hidden');
tooltip_bg.setAttribute('visibility','hidden');
timeEntradaEnBoton = setInterval(function(){
cuentaAtras = cuentaAtras-1;
if(cuentaAtras == 0) {
tooltip.setAttribute('visibility','visible');
tooltip_bg.setAttribute('visibility','visible');
clearInterval(timeEntradaEnBoton);
}
}, 1500);
}
/***********************************
Actualiza el contenido del ToolTip.
************************************/
function actualizaToolTip(evt,elemento) {
//Ayuda genérica
tooltip.innerHTML = "First Line";
//Dependiendo del botón, un tooltip u otro
tooltip.innerHTML +='\r\nSecond Line.'
tooltip.innerHTML +='\r\nThird Line'
tooltip.innerHTML +='\r\nFourth Line.'
//Setea dimensiones del ToolTip
tooltip.setAttribute('x',evt.clientX+11);
tooltip.setAttribute('y',evt.clientY+27);
var bBoxToolTip=tooltip.getBBox();
var anchoToolTip = bBoxToolTip.width;
var altoToolTip = bBoxToolTip.height;
tooltip_bg.setAttribute('width',anchoToolTip+8);
tooltip_bg.setAttribute('height',altoToolTip+4);
tooltip_bg.setAttribute('x',evt.clientX+8);
tooltip_bg.setAttribute('y',evt.clientY+14);
}
]]>
</script>
<g>
<g id="toggleInsertaElementoLCOND" class="boton" toggleButton="true" triStateButton="false">
<path id="bordeLCON" fill="white" stroke="#000000" stroke-width="0.5" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
M186.875,264.875h46c1.104,0,2,0.895,2,2v21c0,1.104-0.896,2-2,2h-46c-1.104,0-2-0.896-2-2v-21
C184.875,265.77,185.771,264.875,186.875,264.875z"/>
<g id="dibujoLCON">
<path shape-rendering="geometricPrecision" fill="none" stroke="#804040" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="3" d="
M222.918,276.068V268l-6.154,4.009 M223.018,278.74l-0.1,8.011l-6.105-3.938 M214.596,273.402l-6.354,4.002l6.354,4.063"/>
<line shape-rendering="geometricPrecision" fill="none" stroke="#2F5F9E" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="3" x1="194.25" y1="277.395" x2="208.268" y2="277.395"/>
<path shape-rendering="geometricPrecision" fill="none" stroke="#2F5F9E" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="3" d="
M215.512,269.639l2.442,4.68 M220.568,276.068h4.932 M225.5,278.77h-4.932 M213.412,283.823l2.484-4.682 M217.997,280.42
l-2.485,4.684 M215.898,275.695l-2.486-4.686"/>
</g>
</g>
<rect class="tooltip_bg" id="tooltip_bg" x="0" y="0" rx="4" ry="4" width="55" height="17" visibility="hidden"/>
<text class="tooltip" id="tooltip" x="0" y="0"></text>
</g>
</svg>